使用Canvas绘图（2）--绘制路径

最新推荐文章于 2024-04-08 20:58:26 发布

姚希瑶

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_39178993/article/details/81700001

本文介绍了HTML5 Canvas中绘制路径的方法，包括beginPath()、arc()、arcTo()等，并提供了一个绘制时钟表盘的例子，展示了如何使用stroke()和fill()进行描边和填充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绘制路径

2D绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须要调用beginPath()方法，表示要开始绘制新路径。然后，要通过调用下列方法来实际地绘制路径。

arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y）为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针方向计算。

arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到（x2,y2）为止，并且以给定的半径radius穿过（x1,y1）。

bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为止，并且以（c1x,c1y）和（c2x,c2y）为控制点。

lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止。

moveTo(x,y):将绘图游标移动到（x,y），不画线

quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到（x,y）为止，并且以（cx,cy）作为控制点。

rect(x,y,width,height):从点（x,y）开始绘制一个矩形，宽度和高度分别有width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

创建了路径后，接下来有几种可能的选择，如果想绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

举个例子，绘制一个不带数字的时钟表盘：

var drawing=docu