如何在HTML画布中绘制渐变线?

Nas*_*sir 24 html5 canvas

我想绘制一条渐变线.画布怎么可能?

Sim*_*ris 36

是.例:

// linear gradient from start to end of line
var grad= ctx.createLinearGradient(50, 50, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(1, "green");

ctx.strokeStyle = grad;

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,150);

ctx.stroke();
Run Code Online (Sandbox Code Playgroud)

在这里看到它:

http://jsfiddle.net/9bMPD/

  • 请注意,渐变不是遵循圆形而是线性的.它不会均匀分布.通过将圆分成几个部分并为每个部分创建单独的渐变,可以使其更加均匀. (2认同)