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

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

  •  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 回复  |  直到 11 年前
        1
  •  6
  •   Domenic    14 年前

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

        2
  •  1
  •   iancrowther    13 年前

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

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

    谢谢