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

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

canvas html5 javascript

Domenic · 技术社区 · 15 年前

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

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

Domenic 15 年前

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

iancrowther 14 年前

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

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

谢谢

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

10 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

10 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前