canvas绘制--圆角多边形

context.arcTo()      

　　arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

JavaScript 语法：	context.arcTo(x1,y1,x2,y2,r);

参数描述

参数	描述
x1	弧的起点的 x 坐标。
y1	弧的起点的 y 坐标。
x2	弧的终点的 x 坐标。
y2	弧的终点的 y 坐标。
r	弧的半径。

 

使用如下：

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 绘制

上述代码绘制效果如下：

起点A，先画一条线AB，使用arcTo声明另外一条线CD，那么BC和CD组成一个夹角，arcTo绘制半径为50的圆弧，然后连接到E点

如果把创建弧的C点坐标改一下（150,0）：ctx.arcTo(150,0,150,70,50); 

如下图看到因为半径大，所以圆弧会撑开，圆弧的起点撑到了BC的线段的反向延长线上

 

 　　我们把半径改小到20，ctx.arcTo(150,0,150,70,20)

如下图：

 

绘制圆角多边形　　 

　　理解了arcTo画弧的逻辑，我们回到绘制圆角多边形的话题

需求简述如下图，三角形ABC，我们绘制成圆角，顶点处是个圆弧。

知道多半形顶点坐标，利用canvas的api方法 arcTo() 就可以实现了。

 

 

 

一个绘制圆角多边形简单的实现：

 1 
 2 
 3 
 4 
 5   
 6   
 7   
 8   
14 
15 
16 
17   
18 
19 
60 
61 

实现效果如下图：