循环设置strokeStyle导致无法画线

Question

代码如下

ctx.beginPath();

ctx.moveTo(0, 0);

for (let i=1; i<=255; i++) {

    // ctx.strokeStyle = 'red'; 如果只设置一样的颜色是可以正常画线的

    ctx.strokeStyle = `#${i.toString(16).repeat(3)}`;

    ctx.lineTo(i, i);

    ctx.stroke();

}

ctx.closePath();

我想要实现的就是每个点都是一种颜色，以此来达到一个渐变的效果。我知道strokeStyle可以直接设置渐变，但是我想这样试试。

Answer 1

stroke() 会把整个path上色，包括之前每次循环中lineTo画的部分。你可能需要在for内也每次beginPath()。