hdc mfc 画扇形图_使用canvas绘制扇形图

Document

你的浏览器不支持canvas，请升级浏览器

(function(){

var canvas=document.querySelector('#cavsElem');

var ctx=canvas.getContext('2d');

canvas.width=600;

canvas.height=600;

canvas.strokeStyle='1px solid #000';

var data = [{

"value": .2,

"color": "red",

"title": "应届生"

},{

"value": .3,

"color": "blue",

"title": "社会招生"

},{

"value": .4,

"color": "green",

"title": "老学员推荐"

},{

"value": .1,

"color": "#ccc",

"title": "公开课"

}];

var tempAngle = -90;

//设置角度的中间变量

var x0 = 400, y0 = 400;

var radius = 200;

// 从-90度开始绘制

for( var i = 0; i < data.length; i++ ) {

ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态

ctx.moveTo(x0,y0);

//当前扇形的角度

var angle = data[i].value * 360;

ctx.fillStyle = data[i].color;

//开始从 tempAngle绘制

var startAngle = tempAngle * Math.PI / 180;

//从tempAngle绘制到 我们自己的angle区域

var endAngle = (tempAngle + angle) * Math.PI / 180;

//参数： x0，y0 圆心坐标， radius：半径

// startAngle：开始绘制的弧度

// endAngle：结束绘制的弧度！！

ctx.arc(x0, y0, radius, startAngle, endAngle);

ctx.fill();

tempAngle += angle;//下一次绘制的起始角度

}

}())