【绘制】HTML5 Canvas圆弧和圆形的绘制（图文、实例）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

在Canvas绘图环境中提供了两个绘制圆弧和圆形的方法：

方法	描述
arc(double x,double y,double radius,double startAngle,double endAngle,boolean counter-clockwise)	以（x,y）为原点，radius为半径，以startAngle和endAngle为起止角画弧线路径，参照counter-clockwise确定顺逆时针
arcTo(double x1,double y1,double x2,double y2,double radius)	以当前路径止点与(x1,y1)作一条不存在的线，以(x1,y1)和(x2,y2)作另一条线，以radius为半径画同时相切两条线的弧形路径

arc()

arc()方便于以某一点为圆心作弧线。值得注意的是，startAngle在值为0的情况下，是直角坐标系中的对应的弧度是0，也就是原点的正右方向。

在线演示 详细代码

 

arcTo() 

arcTo()适合以某个点开始作弧。以下图为例，蓝色的是路径起点，记作A，红色的(x1,y1)是第一组参数位置，记作B，(x2,y2)是第二组参数记作C，画圆弧的根据是，以特定半径，作同时相切图示两条线的虚线（AB和BC），可得到唯一的圆弧。

为了方便理解，我画了一个表示圆角矩形的一个角 ，虚线代表矩形的上边和右边，红色的弧是通过arcTo实线的弧线。

在线演示 详细代码