3

看来我对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。

感谢您的输入！

4

1 回答 1

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();​
于 2012-12-17T22:15:14.463 回答