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 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <style> 9 #canvas { 10 400px; 11 height: 400px; 12 } 13 </style> 14 </head> 15 16 <body> 17 <canvas id="canvas" width="800" height="800"></canvas> 18 </body> 19 <script> 20 function draw() { 21 const p = [ 22 [15, 20], 23 [20, 200], 24 [200, 300], 25 [300, 100], 26 [200, 20], 27 ]; 28 const p1 = [ 29 [300,50], 30 [400,50], 31 [350,150] 32 ] 33 const canvas = document.getElementById("canvas"); 34 const ctx = canvas.getContext("2d"); 35 drawRect(p, 30, ctx); 36 drawRect(p1, 10, ctx); 37 } 38 39 function drawRect(p, radius, ctx) { 40 ctx.beginPath(); 41 const startPoint = [ 42 (p[0][0] + p[p.length - 1][0]) / 2, 43 (p[0][1] + p[p.length - 1][1]) / 2, 44 ]; 45 ctx.moveTo(...startPoint); 46 for (let i = 0; i < p.length; i++) { 47 if (i === p.length - 1) { 48 ctx.arcTo(...p[p.length - 1], ...p[0], radius); 49 } else { 50 ctx.arcTo(...p[i], ...p[i + 1], radius); 51 } 52 } 53 ctx.closePath(); 54 ctx.stroke(); 55 } 56 window.onload = function() { 57 draw(); 58 }; 59 </script> 60 61 </html>
实现效果如下图：
