代码之家 › 专栏 › 技术社区 › Dylan Meeus

Web部件绘图灰色画布

webassembly colors random go string

Dylan Meeus · 技术社区 · 6 年前

我正在使用go并将其编译为Web程序集。

我试图用随机的颜色来渲染相邻的一组矩形,但它们一直呈现为灰色。

我的呈现函数如下所示:

 for row,_ := range rows {
    for col,_ := range row {
        ctx.Set("fillStyle", fmt.Sprintf("#%06x", rand.Int()))
        ctx.Call("fillRect", 20, 20 + (col * width), maxHeight - (row*height))
    }
 }

用它来渲染一个大的块(所有的矩形都在旁边),但都是灰色的,而不是用不同的颜色。

这个示例中的代码是否足够帮助您做进一步的工作?如果不是的话,我可以把它发布到一个要点上,就像我刚接触到的WASM一样,我不确定哪些部分真的是相关的——但据我所知,这两个函数是唯一在渲染方面做些事情的函数。

1 回复 | 直到 6 年前

icza 6 年前

问题是使用此表达式构造填充样式:

fmt.Sprintf("#%06x", rand.Int())

rand.Int() 返回非负伪随机 int . 尺寸 int 如果是64位 GOOS=js 和 GOARCH=wasm . 这意味着随机 int 数字将是随机的8个字节(由于非负的原因,第一位总是0)。

如果用 %06x 动词,就像几乎所有的时间一样,它将不仅仅是6个十六进制数字。宽度 6 意味着至少 6、国旗 0 如果小于0,则表示用零填充。但如果它更长,就不会被截断。

如果你把一个无效的颜色设置为 canvas.fillStyle ,它将忽略它,最后一组有效的填充样式将保持活动状态。我猜是你在循环之前用的灰色。

修复很容易,只要确保随机数不超过3个字节,或者换句话说,6个十六进制数字。使用简单的位掩码:

ctx.Set("fillStyle", fmt.Sprintf("#%06x", rand.Int()&0xffffff))

或使用 rand.Intn() 而不是 rand in() :

ctx.Set("fillStyle", fmt.Sprintf("#%06x", rand.Int(0x1000000)))

阿尔索 context.fillRect() 需要4个参数: x , y , width 和 height ,所以应该是这样的:

ctx.Call("fillRect", 20+(col*width), maxHeight-(row*height), width, height)

推荐文章

Sarah Marie · 单击按钮,用随机颜色/大小将每个字母设置为字符串样式

2 年前

Malak · 为参数的|省道颤振指定颜色值

2 年前

elliot · 如何更改ggplot中geom\u line()中线条的颜色顺序

7 年前

KTietjen · 一张ggplot2地图上的两个独立颜色渐变色比例

7 年前

oudekaas · 基于百分比宽度更改颜色的进度条

7 年前

Eruditio · 直方图轴散点图中的颜色密度

7 年前

AAM · 使用引导更改导航栏上文本的颜色

7 年前

austinm98 · J按钮颜色不变

7 年前

KevinM · 同一页面中的多个SVG问题-消失和颜色更改

7 年前

Wolk · 交替颜色onClick

7 年前