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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
用PHP调用Oracle存储过程
2006/10/09 PHP
php基础知识:类与对象(5) static
2006/12/13 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php里array_work用法实例分析
2015/07/13 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
asp.net和php的区别点总结
2019/10/10 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
Vue精简版风格概述
2018/01/30 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
使用python接入微信聊天机器人
2020/03/31 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python的flask框架难学吗
2020/07/31 Python
Pycharm Git 设置方法
2020/09/15 Python
详解Django中异步任务之django-celery
2020/11/05 Python
机械专业应届生求职信
2013/09/21 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
教师自我评价范文
2013/12/16 职场文书
小学六年级学生评语
2014/04/22 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
教师个人培训总结
2015/02/11 职场文书
律师催款函范文
2015/06/24 职场文书
Python django中如何使用restful框架
2021/06/23 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL