ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
[TOC] ## 绘制圆弧 方式一: `arc(x, y, r, startAngle, endAngle, anticlockwise)` 以`(x, y)`为圆心,以`r`为半径,从`startAngle`弧度开始到`endAngle`弧度结束。`anticlosewise`是布尔值,`true`表示逆时针,`false`表示顺时针(默认是顺时针)。 注意: 1. 这里的度数都是弧度。 2. `0`弧度是指的`x`轴正方向。 ``` radians=(Math.PI/180)*degrees //角度转换成弧度 ``` 方式二: `arcTo(x1, y1, x2, y2, radius)` 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。 ## 实例 方式一绘制 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.arc(50,100,30,0,Math.PI*3/2,false) ctx.stroke() } ``` ![](https://img.kancloud.cn/5a/88/5a885d1295a109becdba902c1e640fd8_171x193.png) 方式二绘制 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(50,50) ctx.arcTo(200,50,200,250,100) ctx.lineTo(200,200) ctx.stroke() } ``` 绘制为一个圆弧加两条切线 ![](https://img.kancloud.cn/c0/27/c0276e0cc99f97d347b6bd205286411e_189x187.png)