html5路径的奇怪行为答案

【问题标题】：Weird behaviour of html5 pathhtml5路径的奇怪行为
【发布时间】：2012-02-03 04:24:39
【问题描述】：

我正在尝试为一位家庭成员制作一个小的 html5 动画：一条流淌着段落的河流。这其实一点都不专业。我们只是想知道 html5 有什么可能。

设置如下：我们有一个画布和一个名为painter.js的javascript文件。该脚本有两个工作：显示和移动段落以及渲染像水一样的东西。

段落相当简单：简单的 png 图像被拉伸并从一侧移动到另一侧。

然而，水是有问题的。我的想法是创建一条路径并用渐变填充它，从亮蓝色慢慢变为深蓝色/黑色。下面是一些代码，请注意：

此代码来自函数 water() 内部，该函数在渲染段落之前和清除画布之后重复调用。画布的宽度为 400 像素，高度为 500 像素。河面上应该有波浪，因此调用了 quadraticCurveTo()。水位保持不变 - 我想玩它，因此它是一个变量。然而，wavesize 在每次执行时都会被修改。这不是 water() 的全部功能，我已经为您省去了关于波形大小减小或减小的繁琐部分。

context.beginPath();

context.moveTo(0,waterlevel);
context.quadraticCurveTo(50,waterlevel-wavesize,100,waterlevel);
context.moveTo(100,waterlevel);
context.quadraticCurveTo(150,waterlevel+wavesize,200,waterlevel);
context.moveTo(200,waterlevel);
context.quadraticCurveTo(250,waterlevel-wavesize,300,waterlevel);
context.moveTo(300,waterlevel);
context.quadraticCurveTo(350,waterlevel+wavesize,400,waterlevel);
context.moveTo(400,waterlevel);
context.quadraticCurveTo(450,waterlevel-wavesize,500,waterlevel);
context.moveTo(500,waterlevel);
context.lineTo(500,400);
context.moveTo(500,400);
context.lineTo(0,400);
context.moveTo(0,400);
context.lineTo(0,150);
context.moveTo(0,150);

context.fillStyle=my_gradient;
context.fill();

结果与我的意图相反：

我的第一个想法是路径搞砸了，但是用 context.stroke() 替换 context.fill() 显示了这一点：

你能帮帮我吗？知道如何用自定义渐变填充自定义路径吗？如果您有链接或示例代码，我会很高兴。

感谢您的宝贵时间

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

摆脱你所有的moveTo，这样你就可以：

context.moveTo(0,waterlevel);
context.quadraticCurveTo(50,waterlevel-wavesize,100,waterlevel);
context.quadraticCurveTo(150,waterlevel+wavesize,200,waterlevel);
context.quadraticCurveTo(250,waterlevel-wavesize,300,waterlevel);
context.quadraticCurveTo(350,waterlevel+wavesize,400,waterlevel);
context.quadraticCurveTo(450,waterlevel-wavesize,500,waterlevel);
context.lineTo(500,400);
context.lineTo(0,400);
context.lineTo(0,150);

您不应该将moveTo 用于这种类型的形状。在画布上画画就像用一支笔，如果你在某处画一条线，那就是笔尖结束的地方。只有当您拿起笔将其带到某个地方而不在该地方画一条线（或曲线）时，您才想使用moveTo。

【讨论】：