多语言展示
当前在线:1982今日阅读:26今日分享:39

HTML5之canvas绘制路径

今天给大家介绍HTML5中标签绘制路径的方法,供大家参考!
工具/原料
1

电脑:win10系统

2

浏览器:chrome80.0

方法/步骤
1

使用【beginPath()】函数新建一条路径。

2

然后使用画图命令画出路径。【moveTo(x, y)】函数表示将画笔移动到指定的坐标位置,【lineTo(x, y)】函数表示绘制一条从当前位置到指定位置的直线。

3

使用【closePath()】函数闭合路径。

4

使用【stroke()】函数来根据路径绘制图形轮廓。

5

使用【fill()】函数来填充路径的内容区域生成实心的图形。

总结

1、使用beginPath()函数新建一条路径。2、然后使用画图命令画出路径。3、使用closePath()函数闭合路径。4、使用stroke()函数来根据路径绘制图形轮廓。5、使用fill()函数来填充路径的内容区域生成实心的图形。

注意事项

当调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

推荐信息