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

Answer 1

问题是您使用此表达式来构造填充样式：fmt.Sprintf("#%06x", rand.Int())rand.Int()返回一个非负伪随机数int。如果和的大小int为 64 位。这意味着随机数将是随机的 8 个字节（由于非负，第一位始终为 0）。GOOS=jsGOARCH=wasmint如果你用动词格式化这样一个数字%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)