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-sizing属性
Apr 17 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
大学生学习自我评价
2014/01/13 职场文书
员工辞职信范文
2015/03/02 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2015年防汛工作总结
2015/05/15 职场文书
对学校的意见和建议
2015/06/04 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL