首页 > 代码库 > canvas绘制饼状图
canvas绘制饼状图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06绘制饼状图</title></head><body> <canvas id="canvas"> 抱歉，您的浏览器不支持Canvas。请升级您的浏览器！ </canvas> <script> (function(){ var canvas = document.getElementById("canvas"); canvas.border = "1px solid #000"; canvas.width = 600; canvas.height = 600; var ctx = canvas.getContext("2d"); var data = [{ "value": .2, "color": "red", "title": "应届生" },{ "value": .3, "color": "blue", "title": "社会招生" },{ "value": .4, "color": "green", "title": "老学员推荐" },{ "value": .1, "color": "#ccc", "title": "公开课" }]; var x0 = 300; var y0 = 300; var radius = 100; var tempAngle = -90; for(var i=0;i<data.length;i++){ // 开始绘制新状态的扇形 ctx.beginPath(); ctx.moveTo(300, 300); ctx.fillStyle = data[i].color; var angle = data[i].value*360; var startAngle = tempAngle*Math.PI/180; var endAngle = (tempAngle + angle)*Math.PI/180; ctx.arc(300, 300, 100, startAngle, endAngle); ctx.fill(); tempAngle+=angle; } }()); </script></body></html>
效果图：
canvas绘制饼状图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。