<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制饼形图。</title> <style> canvas{ border: 1px solid green; } </style> </head> <body> <!-- 绘制饼形图 --> <canvas width="500" height="500" id="canvas"></canvas> </body> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function toAngle(radian){ return radian*180/Math.PI; } function toRadian(angle){ return angle*Math.PI/180; } /*将饼状图画出来*/ var colors = 'green,yellow,pink,blue,red,lightgreen,lightblue'.split(','); var text = 'HTML5,Canvas,Javascript,Css3,Ajax,框架封装,jQuery与移动Web'.split(','); var x0 = canvas.width/2, y0 = canvas.height/2, radius = 100, start = -5, distance = 20, padding = 5, step = 360/colors.length; for(var i = 0 ; i < colors.length ; i ++){ ctx.beginPath(); ctx.fillStyle = colors[i]; ctx.moveTo(x0,y0); ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); ctx.fill(); /*画斜线*/ ctx.beginPath(); ctx.strokeStyle = colors[i]; var x1 = x0 + (radius+distance)*Math.cos(toRadian(( start-step/2 ))), y1 = y0 + (radius+distance)*Math.sin(toRadian(( start-step/2 ))); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke(); /*写文字*/ ctx.beginPath(); ctx.fillStyle = colors[i]; var textX = x1, textY = y1; if(start-step/2 > 90 && start-step/2 < 270){ ctx.textAlign = 'right'; textX = textX - padding; }else{ ctx.textAlign = 'left'; textX = textX + padding; } ctx.fillText(text[i],textX,textY-padding/2); /*画直线*/ ctx.beginPath(); ctx.moveTo(x1,y1); //计算文字的宽度 var length = ctx.measureText( text[ i ] ).width if(start-step/2 > 90 && start-step/2 < 270){ x1 += -2*padding-length; }else{ x1 += 2*padding + length; } ctx.lineTo(x1,y1); ctx.stroke(); /*画饼形图*/ /*ctx.beginPath(); ctx.fillStyle = colors[i]; ctx.moveTo(x0,y0); ctx.arc(x0,y0,radius,toRadian(start),toRadian(start+=step)); ctx.fill();*/ } </script> </html>