您现在的位置是：网站首页> 编程资料编程资料

利用html5 canvas动态画饼状图的示例代码用纯CSS实现饼状Loading等待图效果

2023-10-16 266人已围观

简介这篇文章主要介绍了利用html5 canvas动态画饼状图的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了利用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 拖拽批量上传文件的示例代码html5拖拽排序多图片上传插件特效源码html5实现多图片预览上传及点击可拖拽控件html5使用Drag事件编辑器拖拽上传图片的示例代码HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）HTML5 canvas实现移动端上传头像拖拽裁剪效果结合html5+nodejs+express实现拖拽上传的功能HTML5拖拽文件到浏览器并实现文件上传下载功能代码html5 拖拽上传图片实例演示HTML5拖拽文件上传的示例代码

下一篇：全民英雄智力英雄仙女龙全面解析_智力英雄仙女龙好不好用_手机游戏_游戏攻略_

您现在的位置是：网站首页> 编程资料编程资料

利用html5 canvas动态画饼状图的示例代码用纯CSS实现饼状Loading等待图效果

相关内容

点击排行

本栏推荐

猜你喜欢