Question

为什么以下代码不会生成三行，所有行都具有相似的渐变？

<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作业如何影响未来的笔画......

Answer 1

是的，我想通了。我需要在ctx.beginPath()之前添加ctx.strokeStyle = g;。事实证明，线条是路径的一部分，因此如果您没有开始新的路径，它会认为您仍在继续旧路径，因此使用您的原始起点和最终终点作为开始和结束用于渐变目的。

Answer 2

我得到了strokeStyle的覆盖！通过添加一个beginPath我的笔触颜色可以工作..

ctx.beginPath（）; ctx.moveTo（x，y）; ctx.lineTo（x，y）; ctx.strokeStyle =“＃182945”; ctx.stroke（）;

由于

HTML5 Canvas：渐变和strokeStyle让我很困惑

2 个答案: