html5路径的奇怪行为

Question

我正在尝试为一个家庭成员制作一个小的html5动画：一条流动段落的河流。这实际上没有专业性。我们想知道html5有什么可能。

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

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

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

此代码来自函数water（）内部，在渲染段落之前和画布清除之后重复调用。画布的宽度为400像素，高度为500像素。河流表面应该有波浪，因此调用quadraticCurveTo（）。水位保持不变 - 我想玩它，因此它是一个变量。然而，每次执行都会修改waveize。这不是整个函数水（）我已经让你免于浪漫的不稳定部分。

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（）会显示：

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

感谢您的时间

Answer 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，如果您拿起笔将其带到某个地方而不在该地方画线（或曲线）。