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

Answer 2

我把数组换成了这个：

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

它开始正常工作。

Answer 3

你永远不会为你设置strokeStyle。它默认为＃000000。

html5画布笔触颜色总是显示为灰色？

3 个答案: