4

Есть такой код:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 200, 200);
var pix = ctx.getImageData(0,0,600,600);
for(var i = 0; i <= pix.data.length; ) {
  if(pix.data[i] > 0) {
    pix.data[i] = 133;
    pix.data[i+1] = 20;
    pix.data[i+2] = 154;
  }
  i = i + 4;
}
ctx.putImageData(pix,0,0);
<canvas width="600" height="600" id='canvas'></canvas>

Если выбираю по признаку pix.data == 0, то перекрашивает контур в произвольный цвет. Почему не работает для области вокруг и внутри квадрата?

3
  • Если до того, как нарисовать контур, залить всю канву белым цветом (нарисовать прямоугольник по размеру канвы), то все работает... 24 сен 2017 в 2:33
  • Но вопрос не закрыт. Мне интересно, почему так происходит 24 сен 2017 в 2:40
  • Если изменять альфа-канал (пытаться подкрутить его на 255), эффекта нет 24 сен 2017 в 4:09

3 ответа 3

1

Дело в том, что canvas по-умолчанию имеет чёрный полностью прозрачный цвет. Т.е. для каждого пикселя каждая цветовая компонента и альфа-канал установлены в ноль.

Нарисуем на маленьком canvas размером 8х8 пикселей небольшой прямоугольник чёрного цвета:

let canvas = document.getElementById('canvas'); //canvas.width == canvas.height == 8
let context = canvas.getContext('2d');
context.strokeStyle = "black";
context.strokeRect(2, 2, 4, 4);

Canvas, увеличенный в 8 раз:

Canvas

Массив пикселей, полученный с помощью getImageData выглядит следующим образом: red, green и blue компоненты каждого пикселя установлены в ноль, а матрица альфа-канала выглядит так:

0   0   0   0   0   0   0   0
0  64 128 128 128 128  64   0
0 128 192 128 128 191 128   0
0 128 128   0   0 127 128   0
0 128 128   0   0 127 128   0
0 128 191 127 127 191 128   0
0  64 128 128 128 128  64   0
0   0   0   0   0   0   0   0

Теперь становится понятно, почему ваш код не работает. В цикле

for(var i = 0; i < pix.data.length; ) {
    if(pix.data[i] > 0) {
        ...
    }
    i = i + 4;
}

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

Если проверку pix.data[i] > 0 заменить на pix.data[i] == 0, то теперь под условие попадут все пиксели canvas, и цвета всех пикселей будут успешно модифицированы. Вот только вы ни как не изменяете альфа-канал, поэтому при отрисовке изменённых пикселей изменения будут видны только у тех пикселей, чей альфа-канал отличен от нуля. В вашем случае это будет всего-лишь контур прямоугольника.

0

Используйте fillRect, а не strokeRect

1
  • Не в этом дело. Мне не нужен просто закрашенный квадрат. Мне нужно сначала нарисовать контур, а потом на холсте залить все пиксели, которые не черные. 25 сен 2017 в 1:25
0

Проблема решилась тем, что я предварительно залила холст белым цветом, а потом совершала над ним все манипуляции. Почему возникла такая проблема, я так и не поняла.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.