Web Assembly 绘制灰色画布

使用 WebAssembly 绘制画布时，如果矩形全部渲染为灰色，可能是由于填充样式的构造不当。`fmt.Sprintf("#%06x", rand.Int())` 会生成 8 字节的随机数，而填充样式仅接受 6 字节。因此，需要将随机数限制在 3 字节以内，例如使用 `fmt.Sprintf("#%06x", rand.Int()&0xffffff)` 或 `fmt.Sprintf("#%06x", rand.Intn(0x1000000))`。此外，`context.fillRect()` 函数需要 4 个参数（x、y、宽度和高度），而不是提供的 3 个参数。

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

解决方案

问题在于您使用此表达式来构造填充样式：

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)

以上就是《Web Assembly 绘制灰色画布》的详细内容，更多关于的资料请关注golang学习网公众号！