canvas绘制弧形

先在html中定义画布大小：

<canvas id="cav" width="300px" height="300px"></canvas>

在script中绘制：

function draw () {
	var ctx=document.getElementById("cav").getContext('2d')
				
	ctx.beginPath() 

    // 默认顺时针为false

	ctx.arc(80,80,40,0,-Math.PI/2,true)  // 弧形 （圆心横坐标，圆心纵坐标，半径，起始弧度，结束弧度,顺逆时针(逆为true 顺为false)）

	// ctx.arc(80,80,40,-Math.PI/2,0,false)  起始弧度调换一下 顺时针变逆时针绘制出来的图形和上面的一样
	// 计算弧度要引入Math.PI  这里-Math.PI/2就是-90度 x轴正方形为0度的方向 y轴负方向为90度的方向 x轴负方向为180度 y轴正方形为270度
				
    ctx.stroke()			
			
	ctx.beginPath()
	ctx.arc(200,80,40,0,-Math.PI/2,true) 
	ctx.closePath()
	ctx.stroke()
				
	ctx.beginPath()
	ctx.arc(80,200,40,0,-Math.PI/2,false) 
	ctx.closePath()
	ctx.stroke()
				
	ctx.beginPath()
	ctx.arc(200,200,40,-Math.PI/2,Math.PI/2,false) 
	ctx.fill()
	ctx.lineWidth=5
	ctx.strokeStyle='orange'
	ctx.closePath()
	ctx.stroke()
}
draw()

实现效果：