HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例


Posted in HTML / CSS onAugust 18, 2017

本文介绍了HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例,具体如下:

实现效果

HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例

1.首先创建html代码

<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>

2.创建canvas环境

var canvas = document.getElementById('canvas'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境,指明为2d
            centerX = canvas.width/2,   //Canvas中心点x轴坐标
            centerY = canvas.height/2,  //Canvas中心点y轴坐标
            rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
            speed = 0.1; //加载的快慢就靠它了

3.绘制5像素宽的运动外圈

//绘制5像素宽的运动外圈
        function blueCircle(n){
            context.save();
            context.strokeStyle = "#fff"; //设置描边样式
            context.lineWidth = 5; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
        }

 4.绘制白色外圈

//绘制白色外圈
        function whiteCircle(){
            context.save();
            context.beginPath();
            context.lineWidth = 2; //设置线宽
            context.strokeStyle = "red";
            context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }

5.百分比文字绘制

function text(n){
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = "#fff"; //设置描边样式
            context.font = "40px Arial"; //设置字体大小和字体
            //绘制字体,并且指定位置
            context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        }

6.让它运动起来

//动画循环
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            if(speed > 100) speed = 0;
            speed += 0.1;
        }());

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条并显示数字百分比</title>

<style>
*{margin:0;padding:0;}
body{text-align:center;background-color:#000;}
</style>

</head>
<body>

<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById('canvas'),  //获取canvas元素
            context = canvas.getContext('2d'),  //获取画图环境,指明为2d
            centerX = canvas.width/2,   //Canvas中心点x轴坐标
            centerY = canvas.height/2,  //Canvas中心点y轴坐标
            rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
            speed = 0.1; //加载的快慢就靠它了 
            
        //绘制5像素宽的运动外圈
        function blueCircle(n){
            context.save();
            context.strokeStyle = "#fff"; //设置描边样式
            context.lineWidth = 5; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
        }
        //绘制白色外圈
        function whiteCircle(){
            context.save();
            context.beginPath();
            context.lineWidth = 2; //设置线宽
            context.strokeStyle = "red";
            context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }  
        //百分比文字绘制
        function text(n){
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = "#fff"; //设置描边样式
            context.font = "40px Arial"; //设置字体大小和字体
            //绘制字体,并且指定位置
            context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        } 
        //动画循环
        (function drawFrame(){
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, canvas.width, canvas.height);
            whiteCircle();
            text(speed);
            blueCircle(speed);
            if(speed > 100) speed = 0;
            speed += 0.1;
        }());
    }
</script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 #HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 #HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 #HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 #HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 #HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 #HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 #HTML / CSS
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
剖析 PHP 中的输出缓冲
2006/12/21 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php银联网页支付实现方法
2015/03/04 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
Vue实现日历小插件
2019/06/26 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
外包公司软件测试工程师
2014/11/01 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
毕业生自我鉴定
2013/12/04 职场文书
写给女生的道歉信
2014/01/14 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
高考升学宴答谢词
2015/01/20 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python