您好!欢迎访问家园网-www.jy.wang!

家园网

cav.fill();啥意思

网络 作者:本站 点击:

cav.fill() 是Canvas绘图中的一个非常重要的方法,它的作用是用当前设置的颜色填充已经绘制好的路径

通俗理解

就像小朋友涂色一样:

  1. 先用铅笔画好星星的轮廓(beginPath + 各种lineTo

  2. 选好要用的蜡笔颜色(fillStyle

  3. 最后涂色填充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()就是给五角星上色的关键一步!没有它,星星就只是个空壳子。

标签: