Веб-сборка рисования серого холста - PullRequest
Новая
       39

Веб-сборка рисования серого холста

0 голосов
/ 09 января 2019

Я использую Go и компилирую его в веб-сборку.

Я пытаюсь визуализировать группу прямоугольников рядом друг с другом случайным цветом, но они продолжают отображаться как просто серые.

Моя функция рендеринга выглядит примерно так: 

 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 Ответ

0 голосов
/ 09 января 2019

Проблема в том, что вы используете это выражение для создания стиля заливки: 

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

rand.Int() возвращает неотрицательное псевдослучайное значение int. Размер int равен 64 битам, если GOOS=js и GOARCH=wasm. Это означает, что случайное число 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)
...