html5 canvas 描边颜色总是显示为灰色？

Question

I've got an array like this:

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

I've got a canvas that I'm "redrawing" every few seconds like this:

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

I can confirm that context.closePath(); is returning the proper color from the array but when I alert context.StrokeStyle it's always set to #000000 and the rect border is grey. How can I fix this?

Answer 1

Add or subtract 0.5 pixels from your values.

Basically, if you try to draw a 1px line centered around an integer pixel value what you end up with is a 2 pixel line centered around that point which and the line will be semi-transparent. Semi-transparent black looks like grey. So, if you want a straight line of any colour that is exactly 1 pixel wide, you need to draw that line with at pixel intervals of 0.5.

Answer 2

I switched the array to this:

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

and it started working properly.

Answer 3

You never set you strokeStyle. its defaulting to #000000.