Question

似乎我对javascript画布描边样式/线条画的理解不符合标准。我想绘制具有一点透明度的线条，但是我无法将透明度应用于每一行（段），而是将其作为渐变应用于我绘制的所有线...

示例代码：

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和笔画如何工作的基本知识，但是看过这里和那里的例子我还没有发现一些揭示...... tt。

感谢您的投入！

Answer 1

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

Javascript画布描边不透明度不应用于每个lineto，而是连续地在线上

1 个答案: