HTML5画布线条画

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

现在，我正在努力填充随机生成的行下面的空间，以便它看起来像一座小山，但我遇到了一些问题。

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

我该怎么办？

在此先感谢。

来源

2011-12-23 dualCore

你应该提供你的代码和http://jsfiddle.net/例子。所以你的问题是如何填充画布后的画布？ – 2011-12-23 16:44:44

这是一个画布问题或更多的算法问题？你在绘画方面有困难吗？或者只是以您所描述的“填充”功能的方式进行操作？ – jyore 2011-12-23 17:10:59

你只是想创建你取悦哪个方式，但也懒得打电话ctx.stroke（）or ctx.fill（）你的整个路径，然后添加两个线段：一到右下角，然后一到左下方。

那么你刚刚画出三面框。顶部，右侧和底部。顶端实际上是一大堆线段（或曲线），但这并不重要，这个想法是一样的。然后你打电话给ctx.fill()，它会填入那个框。

（你不必画出左侧，因为你只是填补。如果你正在抚摸你要调用ctx.close（）第一）

所以你打电话ctx.fill （）一次在年底和整个底部空间将充满

这里是一个活生生的例子：http://jsfiddle.net/wKVRR/

来源

2011-12-24 00:16:58

我真的不能够感谢你了，这会花费我很多时间来解决这个问题。 :) – dualCore 2011-12-24 01:58:57

HTML5画布线条画

回答

相关问题