代码之家 › 专栏 › 技术社区 › Domenic

HTML5画布:渐变和strokestyle让我困惑

canvas html5 javascript

3

Domenic · 技术社区 · 14 年前

为什么下面的代码不生成三行,所有行的梯度都相似?

<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 分配影响将来的笔画…

2 回复 | 直到 12 年前

1

6

Domenic 14 年前

啊,我知道了。我需要添加一个 ctx.beginPath() 就在 ctx.strokeStyle = g; . 事实证明,线条是路径的一部分,因此,如果不开始新的路径,它会认为您仍在继续旧的路径,从而使用原始起点和最终终点作为渐变的起点和终点。

2

1

iancrowther 14 年前

我要让斯特罗凯斯式被改写了!通过添加一个开始路径,我的笔画颜色起作用。

ctx.beginpath(); 移动到(x,y); cTx.线至(x,y); ctx.strokestyle=“182945”; Stk(Stk);

谢谢