如何摆脱HTML5画布中的默认不透明度？

Question

我想在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（完全不透明）？

Answer 1

由于抗锯齿，第二行较轻。您可以包含以下行，以确保每次渲染一行并避免消除锯齿效果。

canvasContext.translate(0.5, 0.5);

http://jsfiddle.net/bagWQ/

Answer 2

你的第一行较暗，因为你画了两次，每次拨打stroke()一次。对stroke()的第二次调用会绘制两条线，因为您没有开始新的路径。