Web Assembly 绘图灰色画布

Question

我正在使用 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 的新手，我不确定哪些部分可能真正相关 - 但据我所知，这两个函数是唯一可以进行渲染的函数。

Answer 1

问题是你使用这个表达式来构造填充样式：

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

rand.Int() 返回一个非负伪随机 int。如果GOOS=js 和GOARCH=wasm，int 的大小为 64 位。这意味着随机的int 数字将是随机的 8 个字节（由于非负数，第一位始终为 0）。

如果你用%06x 动词格式化这样的数字，就像几乎所有时候一样，它会不仅仅是 6 个十六进制数字。宽度6 表示至少 6，标志0 表示如果小于则用零填充。但如果它更长，它不会被截断。

如果您将无效颜色设置为canvas.fillStyle，它将忽略它并且最后设置的有效填充样式将保持活动状态。我猜这是你在循环之前使用的灰色。

修复很简单，只要确保随机数不超过 3 个字节，即 6 个十六进制数字。使用简单的位掩码：

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

或者用rand.Intn()代替rand.Int()：

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)