html5 拖拽画圆,html5 canvas 画圆

title

CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {

this.save();

this.translate(x, y);

this.beginPath();

this.arc(0,0,radius,sDeg, eDeg);

this.save();

this.rotate(eDeg);

this.moveTo(radius,0);

this.lineTo(0,0);

this.restore();

this.rotate(sDeg);

this.lineTo(radius,0);

this.closePath();

this.restore();

return this;

}

var ctx = document.getElementById('myCanvas').getContext('2d');

ctx.sector(100,100,80,0,0.75*Math.PI).fill();

ctx.fillStyle="#f00";

ctx.sector(100,100,80,0.75*Math.PI,1.0*Math.PI).fill();

ctx.fillStyle="#0f0";

ctx.sector(100,100,80,1.0*Math.PI,1.5*Math.PI).fill();

ctx.fillStyle="#00f";

ctx.sector(100,100,80,1.5*Math.PI,2.0*Math.PI).fill();