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畫布線條畫

回答

相關問題