Javascript画布笔划不透明度不适用于每个线条，而是连续线条

Question

看来我对javascript canvas strokestyle/line drawing的理解还达不到标准。我想绘制具有一点透明度的线条，但我无法将透明度应用于每条线（段），而是将其作为渐变应用到我绘制的所有线条上......

示例代码：

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 工作原理的基本知识，但是看了这里和那里的例子后，我没有发现一些有启发性的东西...... tt。

感谢您的意见！

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();​