javascript - html5 Canvas 描边颜色总是显示为灰色？

Question

我有一个这样的数组:

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

我有一个像这样每隔几秒就“重绘”的 Canvas :

// 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 的像素间隔绘制该直线。