canvas绘制渐变线条

Canvas是一个HTML5标签，用于在网页上进行图形渲染，包括绘制渐变线条。在JavaScript中，你可以通过`createLinearGradient()`或`createRadialGradient()`方法创建线性渐变或径向渐变对象，然后结合`lineTo()`方法绘制一条带有渐变效果的直线。

下面是一个简单的示例：

// 创建线性渐变对象
var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'red'); // 起始颜色 (0%, red)
gradient.addColorStop(1, 'blue'); // 结束颜色 (100%, blue)

// 绘制渐变线条
ctx.beginPath();
ctx.moveTo(0, 0); // 线条起点
ctx.lineTo(canvas.width, canvas.height); // 线条终点
ctx.lineWidth = 10; // 线宽
ctx.strokeStyle = gradient; // 设置线条样式为渐变
ctx.stroke(); // 绘制

在这个例子中，从左上角到右下角会绘制出一条从红色渐变到蓝色的直线。