html5 цвет обводки холста всегда отображается серым?

Question

У меня есть такой массив:

var hitColors = ["#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff"];

У меня есть холст, который я «перерисовываю» каждые несколько секунд, например:

// main canvas rectangle
context.beginPath();
context.rect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, canvasWidth, canvasHeight);

context.rect(thisXPos-1, thisYPos-1, words[activeWord][2].width+2, words[activeWord][2].height+2);
context.strokeStyle = hitColors[hitSpot];

alert('"' + hitColors[hitSpot] + '"');
alert(context.strokeStyle);

context.lineWidth = 1;
context.stroke();
context.closePath();

Я могу подтвердить, что context.closePath (); возвращает правильный цвет из массива, но когда я предупреждаю context.StrokeStyle, он всегда имеет значение # 000000, а прямоугольная рамка имеет серый цвет. Как я могу это исправить?

Answer 1

Добавьте или вычтите 0,5 пикселя из ваших значений.

По сути, если вы попытаетесь нарисовать линию в 1 пиксель, центрированную вокруг целочисленного значения пикселя, то получится 2-пиксельная линия, центрированная вокруг этой точки,линия будет полупрозрачной.Полупрозрачный черный выглядит как серый.Таким образом, если вы хотите получить прямую линию любого цвета шириной ровно в 1 пиксель, вам нужно нарисовать эту линию с интервалом в 0,5 пикселя.

Answer 2

Я переключил массив на это:

var hitColors = ["#f00","#0f0","#00f","#ff0","#0ff","#f0f"];

и он начал работать правильно.

Answer 3

Вы никогда не устанавливаете свой инсульт. по умолчанию # 000000.