为什么下面的代码没有产生三行，都具有相似的梯度？
<html>
<body style="background: black;">
<canvas id="Test" width="516" height="404"> </canvas>
<script>
var ctx = document.getElementById('Test').getContext('2d');
ctx.lineWidth = 8;
function addColorStops(gradient) {
gradient.addColorStop(0.5, 'rgba(151, 165, 193, 0.5)');
gradient.addColorStop(1, 'rgba(151, 165, 193, 1)');
}
function drawLine(x1, x2, y) {
var g = ctx.createLinearGradient(x1, y, x2, y);
addColorStops(g);
ctx.strokeStyle = g;
ctx.moveTo(x1, y);
ctx.lineTo(x2, y);
ctx.stroke();
}
drawLine(10, 100, 10);
drawLine(10, 100, 30);
drawLine(10, 100, 50);
</script>
</body>
</html>
取而代之的是，第一行的梯度非常非常小，第二行的梯度非常好，最后一行的梯度非常大。
我认为这源于误解了
createLinearGradient 的参数应该如何工作，或者误解了 strokeStyle 分配如何影响 future 的笔画...... 最佳答案
啊，我想通了。我需要在 ctx.beginPath() 之前添加一个 ctx.strokeStyle = g; 。事实证明，线条是路径的一部分，因此如果您不开始一条新路径，它会认为您仍在继续旧路径，因此使用原始起点和最终终点作为起点和终点用于渐变目的。
关于javascript - HTML5 Canvas : gradients and strokeStyle have me confused，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4181640/