Web Assembly 绘图灰色 canvas

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))
    }
 }

它渲染了一个大块（所有矩形彼此相邻）但都是灰色的，而不是用不同的颜色。

示例中的这些代码是否足以提供进一步的帮助？如果不是，我可以 post 将其概括为要点，因为我是 WASM 的新手，我不确定哪些部分可能真正相关 - 但据我所知，这 2 个函数是唯一与渲染有关的函数.

Answer 1

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

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

rand.Int() returns 一个非负伪随机数 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 绘图灰色 canvas

Web Assembly drawing gray canvas

string

random

colors

go

webassembly