利用canvas绘制饼状图

代码中有注释，就不多说了很容易看明白

	var canvas = document.getElementById('canvas');
		canvas.width='600';
		canvas.height='400';
		var ctx = canvas.getContext('2d');
		var sum=0;// 总和
		var arr = [];//存储每一个扇形的值
		var colors = [];//存储每一个扇形的颜色
		var start = 0;//每一个扇形的开始π值
		var end = 0;//每一个扇形的结束数π值
		var r = 150;//半径
		var lineX=lineY=0;
		ctx.translate(300,200);


		init();
		function init(){
			for(var i=0;i<6;i++){
				var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
				colors.push(color);
				
				var value = Math.round(Math.random()*100+20);//在一定范围内随机数值
				arr.push(value);
				
				sum+=value;//累加总和
			}
		}	
		
		draw();
			
		function draw(){
			for(var i=0;i0 && lineY>0){
					dis=70
				}else if(lineX<0 && lineY<0){
					dis=-70
				}else if(lineX<0){
					dis=-70
				}else if(lineY<0){
					dis=70
				}
				
				ctx.lineTo(lineX+dis,lineY);
				ctx.stroke();
				//绘制百分比
				var text = Math.round(arr[i]/sum*100)+'%';
				ctx.fillText(text,lineX+dis,lineY);
				ctx.closePath();
				start = end;
			}
			
		}
		

最后的样子