canvas画扇形图（本文来自于http://jo2.org/html5-canvas-sector/）

1.定义画扇形的构造函数：

//扇形
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('cvs').getContext('2d');
ctx.sector(100,100,50,0,Math.PI/180*230).fill();

 

//比例扇形

var deg = Math.PI/180;
ctx.sector(100,100,80,30*deg,111*deg).fill();
ctx.fillStyle="#f00";
ctx.sector(100,100,80,111*deg,190*deg).fill();
ctx.fillStyle="#0f0";
ctx.sector(100,100,80,190*deg,233*deg).fill();
ctx.fillStyle="#00f";
ctx.sector(100,100,80,233*deg,280*deg).fill();
ctx.fillStyle="#789";
ctx.sector(100,100,80,280*deg,345*deg).fill();
ctx.fillStyle="#abcdef";
ctx.sector(100,100,80,345*deg,30*deg).fill();

转载于:https://www.cnblogs.com/dangou/p/5880590.html