【第2章 绘制】2.9 圆弧和圆形的绘制

Canvas 绘图环境提供了两个用于绘制圆弧和圆形的方法，arc() 与 arcTo()。

arc() 方法的用法

arc() 方法创建一个以坐标 (x, y) 为中心，以 radius 为半径的圆弧。路径从 startAngle 开始，到 endAngle 结束，路径方向由 counterclockwise 参数决定（默认为顺时针方向）。

startAngle在值为0的情况下，是直角坐标系中的对应的弧度是0，也就是原点的正右方向。

MDN-arc()

注意：arc() 方法所绘制的可能不仅仅是一段圆弧，如果在当前路径中有子路径的话，那么浏览器会将子路径的终点与圆弧的起点用线段连接起来。在调用 arc() 之前，先调用 beginPath() 方法清除当前路径中的所有子路径。

arcTo() 方法的用法

arcTo() 方法用于通过给定的控制点和半径向当前子路径添加一个圆弧。如果需要，例如起始点和控制点在一条直线上，该圆弧会自动与路径的最后一个点用直线连接。

在这个示例中，arcTo() 创建的路径是粗黑色的。切线是灰色的，控制点是红色的，起始点是蓝色的。arcTo() 的实质和二次方贝塞尔曲线很像。

MDN-arcTo

使用arcTo方法绘制圆角矩形

下面应用程序使用 arcTo() 自定义实现了圆角矩形的效果，其实最新的规范中新增了 roundRect() 方法用于绘制圆角矩形。