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 个像素。

基本上，如果您尝试绘制以整数像素值为中心的 1px 线，您最终会得到一条以该点为中心的 2 像素线，该线将是半透明的。半透明的黑色看起来像灰色。因此，如果您想要一条宽度为 1 像素的任何颜色的直线，则需要以 0.5 的像素间隔绘制该线。