利用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;i<arr.length;i++){
				ctx.beginPath();
				ctx.moveTo(0,0);
				//计算画圆的结束位置
				end = start + arr[i]/sum * 2 * Math.PI;
				//画圆
				ctx.arc(0,0,r,start,end);
				ctx.fillStyle=colors[i];//设置填充颜色
				ctx.fill();
				//画边 白色，用来隔开
				ctx.strokeStyle='white';
				ctx.stroke();
				ctx.closePath();
				
				//画指示线和显示比例
				var dis=0;
				ctx.beginPath();
				ctx.strokeStyle='black';
				//计算每个圆弧的中间位置的坐标
				lineX = Math.cos(start + (end-start)/2)*r;
				lineY = Math.sin(start + (end-start)/2)*r;
	
				ctx.moveTo(lineX,lineY);
				//坐标的正负来确定线绘制的方向
				if(lineX>0 && 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;
			}
			
		}
		

最后的样子

最后

以上就是诚心香烟为你收集整理的利用canvas绘制饼状图的全部内容，希望文章能够帮你解决利用canvas绘制饼状图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。