cav.fill() 是Canvas绘图中的一个非常重要的方法,它的作用是用当前设置的颜色填充已经绘制好的路径。
通俗理解
就像小朋友涂色一样:
先用铅笔画好星星的轮廓(
beginPath+ 各种lineTo)选好要用的蜡笔颜色(
fillStyle)最后涂色填充(
fill())- 就是这一步!
具体到这个五角星代码
cav.beginPath(); // 1. 准备一张白纸 cav.fillStyle = '#ff0'; // 2. 选好黄色蜡笔 // 下面4行画轮廓 cav.moveTo(...); // 3. 画第一个点 cav.lineTo(...); // 4. 画到第二个点 cav.lineTo(...); // 5. 画到第三个点 cav.lineTo(...); // 6. 画到第四个点 cav.lineTo(...); // 7. 画到第五个点 cav.closePath(); // 8. 把最后一个点和第一个点连起来(闭合轮廓) cav.fill(); // 9. 用黄色蜡笔涂满整个五角星内部!🎨
执行效果
如果没有
fill():只能看到五角星的线条轮廓(空心星星)有了
fill():五角星内部被填满黄色(实心星星)
生活中的例子
就像:
画好一幅简笔画后,用水彩笔涂上颜色
涂色前只有线条,涂色后才有鲜艳的色块
所以cav.fill()就是给五角星上色的关键一步!没有它,星星就只是个空壳子。