多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 圆形与圆弧 **arc()** 绘制圆弧或者圆,我们使用`arc()`方法 ``` arc(x, y, radius, startAngle, endAngle, anticlockwise) ``` - x:圆弧中心(圆心)的 x 轴坐标。 - y:圆弧中心(圆心)的 y 轴坐标。 - radius:圆弧的半径。 - startAngle:圆弧的起始点, x轴方向开始计算,单位以弧度表示。 - endAngle:圆弧的终点, 单位以弧度表示。 - anticlockwise 可选:可选的Boolean值 ,如果为 true,逆时针绘制圆弧,反之,顺时针绘制。 注意:`arc()`函数中的角度单位是弧度,不是度数。角度与弧度的js表达式: ``` radians=(Math.PI/180)*degrees。 ``` 实例:canvas-demo/arc.html: ``` cxt.beginPath(); cxt.arc(70,70,50,0,Math.PI/2,true); cxt.stroke(); cxt.beginPath(); cxt.arc(180,70,50,0,Math.PI/2,false); cxt.stroke(); cxt.beginPath(); cxt.arc(300,70,50,0,Math.PI/2,true); cxt.fill(); cxt.beginPath(); cxt.arc(400,70,50,0,Math.PI/2,false); cxt.fill(); ``` **arcTo()** `arcTo()`方法用于在画布上创建介于两个切线之间的弧/曲线。 ``` arcTo(x1, y1, x2, y2, radius) ``` - x1:第一个控制点的 x 轴坐标。 - y1:第一个控制点的 y 轴坐标。 - x2:第二个控制点的 x 轴坐标。 - y2:第二个控制点的 y 轴坐标。 - radius:圆弧的半径。 实例:canvas-demo/arcTo.html: ``` <canvas id="canvas" width="400" height="300"> 不支持canvas </canvas> <script> var canvas = document.getElementById('canvas'); var ctx = ''; ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(100,20); ctx.arcTo(150,20,150,70,50); ctx.lineTo(150,120); ctx.stroke(); </script> ```