0

HTML5キャンバスに2本の黒い線を描こうとしています:

JSFiddle: http://jsfiddle.net/KFNt5/ Javascript:

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();

// Draw the red line.
canvasContext.strokeStyle = '#000';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);​

ただし、右側の線は灰色で、半透明であることを示しています。デフォルトの不透明度が 100 (まったく透明ではない) であることを確認するにはどうすればよいですか?

4

2 に答える 2

2

アンチエイリアシングにより、2 番目の線が薄くなります。次の行を含めて、各行を 1 回レンダリングし、アンチエイリアシング効果を回避することができます。

canvasContext.translate(0.5, 0.5);

http://jsfiddle.net/bagWQ/

于 2012-08-27T00:19:26.810 に答える
1

への呼び出しごとに 1 回ずつ、2 回描画したため、最初の行はより暗くなりますstroke()。stroke()新しいパスを開始しなかったため、2 番目の呼び出しで両方の線が描画されます。

于 2012-08-27T00:12:55.823 に答える