JavaScript画布的描边透明度不是应用于每个lineto，而是在线条上持续不断地应用

Question

看来我对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工作原理的一些基础知识，但在这里和那里查看了一些示例之后，我并没有发现什么启示性的东西...谢谢您的支持！

- stackdaemon

Answer 1

在你的for循环中添加a.beginPath()来在每个循环中开始一条新线。否则，你只是一遍又一遍地延伸和描边同一条线。

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.beginPath(); //ADD THIS
      a.moveTo(x, 0);
      a.lineTo(x, HEIGHT);
      a.stroke();
    }

}
applyGrid();​

- Patrick Gunderson

---

不错！你也知道为什么在之前的情况下不透明度没有应用到整个线条，而是作为渐变呈现的吗？ - stackdaemon

@stackdaemon 它根本没有以不同的透明度应用。请再次阅读这个答案，这次慢一点... - Alex Wayne

哇...突然间我明白了。 - stackdaemon

作为一种替代方案，您可以将 a.stroke() 移出循环，这样您只需构建一条复杂的线并在最后绘制它。由于您只使用相同的颜色，这实际上会更有效率。http://jsfiddle.net/gunderson/zKWaT/4/ - Patrick Gunderson

谢谢你的提示！具有讽刺意味的是，在我最初尝试使其工作时，我曾经尝试过这个方法，但透明度太高（我现在意识到了），以至于只用一笔就无法看到线条，所以我就像“嗯...完全没用！”这让我对线条绘制感到困惑... :) - stackdaemon