自定义形状并填写HTML5画布

Question

我有一个小型项目，我在HTML5画布上工作，我想了解如何实现它。我使用所有画布线功能构建了树的轮廓。 lineTo，bezierCurveTo，quadracticCurve等。我附上了大纲的图片。现在，我想要做的是有一些代码填充这个大纲的百分比。有点像从底部开始的进度条。有没有人有如何完成这个想法？

感谢

Answer 1

，而不是问题的思维具有填补树，为什么图像不分成两层，树和“补”里面的百分比，然后再画一个。看到我的图片下面的一个快速和肮脏的例子。

当然，您需要遮盖“填充”层的其余部分，因此您需要填充树形外部的白色，但这应该相当容易，因为您已经找到了路径。实质上，你的路径将代替树形的外边缘，成为树形孔的内边缘！