2022-06-16 分类: 网站建设
<!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>
名称栏目:div里利用canvas进行一个饼形图的绘制
网站URL:/news37/167787.html
成都网站建设公司_创新互联,为您提供网页设计公司、星空体育app最新版本(2024已更新)、全网营销推广、用户体验、网站设计、移动网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容