如何在Javascript中绘制每一条具有相同梯度的线条？

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var startX = 0; // 起始点的x坐标
var startY = 0; // 起始点的y坐标
var endX = 100; // 终点的x坐标
var endY = 100; // 终点的y坐标

var gradient = (endY - startY) / (endX - startX);

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = 'black'; // 设置线条颜色
ctx.lineWidth = 1; // 设置线条宽度
ctx.stroke();