Javascript html5画布笔划颜色始终显示为灰色？

我有一个这样的数组：

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();

我有一张画布，每隔几秒钟我就会像这样“重画”：

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.StrokeStyle时，它总是设置为#000000，并且矩形边框为灰色。如何修复此问题？

从值中添加或减去0.5像素

---

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

我将阵列切换为：

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

---

它开始正常工作。

你从未设置过你的抚摸方式。它的默认值为#000000

关于那段代码的IF语句的一部分，让我来编辑并清理它如果你想要更详细的分析，你应该发布你的代码或工作原型，这与颜色有什么关系？我不担心线宽。这有点猜测，但如果你试图画一条以整像素值为中心的1px线，你最终得到的是一条以该点为中心的2像素线，它是半透明的。半透明（alpha<1）黑色=灰色。好吧，我错了：P，但在绘制1像素宽的线条时，你仍然应该记住这一点。+1用于发布解决方案：）虽然我不确定这是如何解决的。我很感谢链接，我对你的评论投了赞成票。只是碰巧没有解决这个问题。我也不知道为什么更短的十六进制可以工作，我在另一个网站上看到一个使用缩写版本的示例，一时兴起尝试了一下。只是想把它贴出来，以防其他人遇到同样的问题。