html5-canvas - 如何摆脱 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()绘制两条线，因为您没有开始新路径。