看来我对JavaScript画布strokestyle/线条绘制的理解还不够好。我想画一些有一定透明度的线条,但我无法使透明度应用于每条线(线段),而是似乎将其作为渐变应用于我绘制的所有线条...
示例代码:
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
WIDTH = 400;
HEIGHT = 400;
c.width = WIDTH;
c.height = HEIGHT;;
function applyGrid()
{
a.fillStyle = "000000";
a.lineWidth = 2;
a.fillRect(0, 0, WIDTH, HEIGHT);
a.strokeStyle = "rgba(0,200,200,0.1)";
for (var x = 0; x <= WIDTH; x += 50)
{
a.moveTo(x, 0);
a.lineTo(x, HEIGHT);
a.stroke();
}
}
applyGrid();
请看这里的示例代码和(错误的)结果:http://jsfiddle.net/zKWaT/3/ 我希望所有垂直线都具有最右侧线条的透明度,但实际上它们逐渐变淡。我想我错过了关于lineTo和stroke工作原理的一些基础知识,但在这里和那里查看了一些示例之后,我并没有发现什么启示性的东西...谢谢您的支持!
a.stroke()
移出循环,这样您只需构建一条复杂的线并在最后绘制它。由于您只使用相同的颜色,这实际上会更有效率。http://jsfiddle.net/gunderson/zKWaT/4/ - Patrick Gunderson