HTML5 Canvas线条图

Question

我正在开发一个程序，该程序将变量设置为随机数，然后在画布上创建一条线，每次y坐标都不同。 在程序中，一个按钮产生颠簸的线条，另一个按钮使用一些使线条更加平滑的代码。

现在，我正在研究一种方法来填充随机生成的线下方的空间，以使其类似于小山，但是我遇到了一些问题。

在“文本/ javascript”区域中，我定义了画布及其坐标以及所有随机y值变量（但尚未使用）。 如果单击“凹凸”按钮，它将运行一个函数，将y坐标变量设置为画布内的任何内容，然后绘制线条。 如果单击“平滑”按钮，代码将随机设置第一个y坐标变量，然后将下一个变量设置为一个坐标，该坐标比上一个点大一点或小一点，然后画线。 第三个按钮称为“填充”。 该按钮运行另一个功能，该功能检查是否已绘制山丘，然后开始使用所有y坐标值+10绘制另一条线。 （换句话说，在原始线的下面直接画一条线。）我的计划是让按钮在画布的底部一直画这样的线，从而填充线下的空间。 这是很奇怪的地方，我认为问题是“填充”按钮使用了在其他函数中创建的信息（存储在变量中）。

我该怎么办？

提前致谢。

Answer 1

您只想按照自己喜欢的方式创建整个路径，但是不必打扰ctx.stroke（） or ctx.fill（），然后再添加两个线段：一个在右下角，然后一个在左下角。

因此，您刚刚在框上绘制了三个面。 顶部，右侧和底部。 顶部实际上是大量的线段（或曲线），但这没关系，想法是相同的。 然后调用ctx.fill() ，它将填充在该框中。

（由于填充而不必画左侧。如果要抚摸，则首先要调用ctx.close（）。）

因此，您最后一次调用ctx.fill（），整个底部空间将被填充

这是一个实时示例： http : //jsfiddle.net/wKVRR/