这篇文章主要介绍了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.closePath(); ctx.fill();
2.根据不同颜色绘制饼状图
//伪代码 var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角); ctx.fillStyle = 'green'; ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角); ctx.fillStyle = 'red'; ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角); ctx.fillStyle = 'yellow'; ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角); ctx.fillStyle = 'purple'; ctx.closePath(); ctx.fill();
3.动态绘制饼状图
动态绘制圆网上普遍推荐三种方法:requestAnimationFrame、setInterval(定时)、还有动态算角度的。
这里我用的是第一种requestAnimationFrame方式。
在编写的过程中发现一个问题,就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题,需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。
感谢你能够认真阅读完这篇文章,希望小编分享html5+canvas动态如何实现饼状图内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!