var canvas=document.getElementById('progress')
var size=100
var width=20
var length=size-width+width/2
var startAngle=Math.PI * 3/4
var endAngle=Math.PI * 1/4
var primaryColor='#3366cc'
var activeColor='#6699cc'
var ctx=canvas.getContext('2d')
var progress=Math.PI*1.3

//初始化
ctx.translate(size ,size)
//创建外圆
ctx.beginPath()
ctx.fillStyle = primaryColor
var circle = {
  x: 0,
  y: 0,
  r: size
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, startAngle, endAngle, false)
ctx.fill()
ctx.closePath()

//创建进度条
ctx.beginPath()
ctx.fillStyle = activeColor
var circle = {
  x: 0,
  y: 0,
  r: size
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, startAngle, progress, false)
ctx.fill()
ctx.closePath()

//进度条两头的圆圈
ctx.beginPath()
ctx.fillStyle = activeColor
var circle = {
  x: -length*Math.sin(startAngle),
  y: -length*Math.cos(startAngle),
  r: width/2
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI*2, false)
ctx.fill()
ctx.closePath()

ctx.beginPath()
ctx.fillStyle = primaryColor
var circle = {
  x: length*Math.sin(endAngle),
  y: length*Math.cos(endAngle),
  r: width/2
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI*2, false)
ctx.fill()
ctx.closePath()

ctx.beginPath()
ctx.fillStyle = activeColor
var circle = {
  x: length*Math.cos(progress),
  y: length*Math.sin(progress),
  r: width/2
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI*2, false)
ctx.fill()
ctx.closePath()

//创建内圆
ctx.beginPath()
ctx.globalCompositeOperation='destination-out';
var circle = {
  x: 0,
  y: 0,
  r: size-width
}
ctx.moveTo(0, 0);
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false)
ctx.fill()
ctx.closePath()


/*ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-out";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);*/