自定義形狀並填寫HTML5畫布

Question

我有一個小型項目，我在HTML5畫布上工作，我想了解如何實現它。我使用所有畫布線功能構建了樹的輪廓。 lineTo，bezierCurveTo，quadracticCurve等。我附上了大綱的圖片。現在，我想要做的是有一些代碼填充這個大綱的百分比。有點像從底部開始的進度條。有沒有人有如何完成這個想法？

感謝

Answer 1

，而不是問題的思維具有填補樹，爲什麼圖像不分成兩層，樹和「補」裏面的百分比，然後再畫一個。看到我的圖片下面的一個快速和骯髒的例子。

當然，您需要遮蓋「填充」層的其餘部分，因此您需要填充樹形外部的白色，但這應該相當容易，因爲您已經找到了路徑。實質上，你的路徑將代替樹形的外邊緣，成爲樹形孔的內邊緣！