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/