arc 画圆
语法:
ctx.arc(x, y, radius, startAngle, enAngle, Boolean)
圆心坐标: (x, y)
半径: radius
起始角度:startAngle
结束角度:endAngle
旋转方向: true--逆时针 false--顺时针
参数解释
圆心和半径没什么好说的,起始角度和结束角度虽然说是角度,但其实是用弧度来表示位置。范围从 0 - 2π, 在js中, Math.PI 表示π, 所以范围是 0- 2*Math.PI。
还有个就是旋转方向,也就是图行的绘制方向,确定了起始点和结束点, true为逆时针绘制, false为顺时针绘制。 不同的绘制方向会对图行产生影响。
首先,看下图
例子
绘制一个完整的圆形
<canvas id='canvas'></canvas>
let can = document.getElementById('canvas')
if(can.getContext) {
var ctx = can.getContext('2d')
ctx.beginPath()
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
ctx.stroke();
}
绘制一个半圆
var ctx = can.getContext('2d')
ctx.beginPath()
ctx.arc(75,75, 50, Math.PI* 0.2, Math.PI* 0.7, false) // 绘制
ctx.stroke();
绘制一个3/4圆弧
var ctx = can.getContext('2d')
ctx.beginPath()
ctx.arc(75,75, 50, Math.PI* 0.2, Math.PI* 0.7, true)
ctx.stroke();
3/4圆弧的绘制方向是逆时针, 其余条件不变,绘制方向改为顺时针就变成1/4圆弧了
总结
canvas画圆难点在于起始弧度和结束弧度的理解上,只要理解了这两个, 绘制圆形就没有什么难点了