Javascript HTML5画布：渐变和笔划风格让我感到困惑_Javascript_Html_Canvas

Javascript HTML5画布：渐变和笔划风格让我感到困惑

javascript html canvas

Javascript HTML5画布：渐变和笔划风格让我感到困惑,javascript,html,canvas,Javascript,Html,Canvas,为什么下面的代码不生成三条具有相似渐变的线 <html> <body style="background: black;"> <canvas id="Test" width="516" height="404"> </canvas> <script> var ctx = document.getElementById('Test').getContext('2d');

为什么下面的代码不生成三条具有相似渐变的线

<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>


var ctx=document.getElementById（'Test'）.getContext（'2d'）；
ctx.lineWidth=8；
函数addColorStops（渐变）{
渐变。加色停止（0.5，'rgba（151、165、193、0.5'）；
渐变。添加颜色停止（1，'rgba（151，165，193，1'）；
}
功能抽绳（x1、x2、y）{
变量g=ctx.createLinearGradient（x1，y，x2，y）；
添加色块（g）；
ctx.strokeStyle=g；
ctx.moveTo（x1，y）；
ctx.lineTo（x2，y）；
ctx.stroke（）；
}
抽绳（10100,10）；
抽绳（10、100、30）；
抽绳（10、100、50）；

取而代之的是，第一条线有一个非常轻微的梯度，第二条线有一个非常好的梯度，最后一条线有一个剧烈的梯度

我认为这是因为误解了

createLinearGradient

的参数应该如何工作，或者误解了

strokeStyle

赋值如何影响未来的笔划…

啊，我明白了。我需要在

ctx.strokeStyle=g之前添加一个ctx.beginPath（）。事实证明，线条是路径的一部分，因此，如果你不开始一条新路径，它会认为你仍然在继续旧路径，因此使用原始起点和最终终点作为渐变的起点和终点。
我正在覆盖笔划样式！通过添加beginPath，我的笔划颜色工作
ctx.beginPath（）；
ctx.moveTo（x，y）；
ctx.lineTo（x，y）；
ctx.strokeStyle=“#182945”；
ctx.stroke（）
谢谢