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

的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（根本不透明）？

来源

2012-08-26 dangerChihuahua007

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

canvasContext.translate(0.5, 0.5);

http://jsfiddle.net/bagWQ/

来源

2012-08-27 00:19:26

谢谢，它可行，但这很奇怪。如何在两个方向上转换半个像素关闭抗锯齿？ – dangerChihuahua007

实际上并没有关闭反锯齿功能。它只是确保一个像素宽的水平和垂直线不跨越像素边界。这是一个很好的解释：https：//developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors#A_lineWidth_example –

您的第一行比较黑，因为您画了两次，每次拨打stroke()一次。第二个电话stroke()绘制两条线，因为你没有开始一个新的路径。

来源

2012-08-27 00:12:55 Neil

没错，但为什么在黑得率绘制黑色暗色调？这意味着有一个默认的透明度，对吗？ – dangerChihuahua007

事实上，正如Greg Ross所指出的那样，我忘记了更加密切地关注这个形象。最近我切换到高分辨率显示器，很难判断一条线是1或2像素宽... – Neil

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

回答

相关问题