本文介绍了利用html5 canvas动态画饼状图的示例代码，分享给大家，具体如下：
先来看效果图
这里并没引用jquery等第三方库，只是用dom操作和canvas的特性编写的。
canvas画圆大体分为实心圆和空心圆。
根据需求分析知道该圆为实心圆。
1.先用canvas画实心圆
//伪代码var canvas = document.createelement("canvas");var ctx = canvas.getcontext('2d');ctx.beginpath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);ctx.fillstyle = 'green';ctx.clopath();ctx.fill();2.根据不同颜色绘制饼状图
//伪代码var canvas = document.createelement("canvas");var ctx = canvas.getcontext('2d');ctx.beginpath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角);ctx.fillstyle = 'green';ctx.clopath();ctx.fill();ctx.beginpath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角);ctx.fillstyle = 'red';ctx.clopath();ctx.fill();ctx.beginpath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角);ctx.fillstyle = 'yellow';ctx.clopath();ctx.fill();ctx.beginpath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角);ctx.fillstyle = 'purple';ctx.clopath();ctx.fill();3.动态绘制饼状图
动态绘制圆网上普遍推荐三种方法：requestanimationframe、tinterval（定时）、还有动态算角度的。
这里我用的是第一种requestanimationframe方式。
在编写的过程中发现一个问题，就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题，需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。
<!doctype html><html><head> <meta chart="utf-8"> <title></title> <style> #graph {/* border: 1px solid black; height: 100%; width: 100%; box-sizing: border-box;*/ } </style></head><body><div id="circle" style="width: 500px;float: left;"></div></body></html><script type="text/javascript">(function(window,undefined){ var data = [ {"product":"产品1","sales":[192.44 ,210.54 ,220.84 ,230.11 ,220.85 ,210.59 ,205.49 ,200.55 ,195.71 ,187.46 ,180.66 ,170.90]}, {"product":"学生会自律公约产品2","sales":[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]}, {"product":"产品3","sales":[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 衡水市第二中学,135.99 ,130.33]}, {"product":"产品4","sales":[165.64 ,170.15 ,175.10 ,185.32 ,190.90 ,190.01 ,187.05 ,183.74 ,177.24 ,181.90 ,179.54 ,175.98]} ] var dom_circle = document.getelementbyid('circle'); if(dom_circle != undefined && dom_circle != null) { var canvas = document.createelement("canvas"); dom_circle.appendchild(canvas); var ctx = canvas.getcontext('2d'); var defaultstyle = function(dom,canvas){ if(dom.clientwidth <= 300) { canvas.width = 300; dom.style.overflowx = "auto"; } el{ canvas.width = dom.clientwidth; } if(dom.clientheight <= 300) { canvas.height = 300; dom.style.overflowy = "auto"; } el { canvas.height = dom.clientheight; } //坐标轴区域 //注意，实际画折线图区域还要比这个略小一点 return { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0 , //坐标轴在canvas上的left坐标 y: 0 , //坐标轴在canvas上的top坐标 maxx: canvas.width , //坐标轴在canvas上的right坐标 maxy: canvas.height , //坐标轴在canvas上的bottom坐标 r:(canvas.width)/2, //起点 ry:(canvas.height)/2, //起点 cr: (canvas.width)/4, //半径 startangle:-(1/2*math.pi), //开始角度 endangle:(-(1/2*math.pi)+2*math.pi), //结束角度 xangle:1*(math.pi/180) //偏移量 }; } //画圆 var tmpangle = -(1/2*math.pi); var ds = null; var sum = data[0]['sales'][0]+data[0]['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3] var percent1 = data[0]['sales'][0]/sum * math.pi * 2 ; var percent2 = data[0]['sales'][1]/sum * math.pi * 2 + percent1; var percent3 = data[0]['sales'][2]/sum * math.pi * 2 + percent2; var percent4 = data[0]['sales'][3]/sum * math.pi * 2 + percent3; console.log(percent1); console.log(percent2); console.log(percent3); console.log(percent4); var tmpsum = 0; var drawcircle = function(){ if(tmpangle >= ds.endangle) { return fal; } el if(tmpangle+ ds.xangle > ds.endangle) { tmpangle = ds.endangle; } el{ tmpangle += ds.xangle; tmpsum += ds.xangle } // console.log(ds.startangle+'***'+tmpangle); // console.log(tmpsum); 飞鞋门 // ctx.clearrect(ds.x,ds.y,canvas.width,canvas.height); if(tmpsum > percent1 && tmpsum <percent2) { ctx.beginpath(); ctx.moveto(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startangle+percent1,tmpangle); ctx.fillstyle = 浙江嘉兴学院ds.p2; } el if(tmpsum > percent2 && tmpsum <percent3) { ctx.beginpath(); ctx.moveto(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startangle+percent2,tmpangle); ctx.fillstyle = ds.p3; } el if(tmpsum > percent3 ) { ctx.beginpath(); ctx.moveto(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startangle+percent3,tmpangle); ctx.fillstyle = ds.p4; } el{ ctx.beginpath(); ctx.moveto(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startangle,tmpangle); ctx.fillstyle = ds.p1; } ctx.clopath(); ctx.fill(); requestanimationframe(drawcircle); } this.todraw = function(){ ds= defaultstyle(dom_circle,canvas); // console.log(tmpangle); // console.log(ds.xangle) ctx.clearrect(ds.x,ds.y,canvas.width,canvas.height); drawcircle(); } this.todraw(); var lf = this; window.onresize = function(){ 历史上的赵云lf.todraw() } }})(window); </script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 08:24:44，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f3caf6e1f3861bd240c69ed2125e1fd8.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：利用html5 canvas动态画饼状图的示例代码.doc
本文 PDF 下载地址：利用html5 canvas动态画饼状图的示例代码.pdf
| 留言与评论（共有 0 条评论） |
