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 相关文章推荐
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
简单实现php上传文件功能
2017/09/21 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python中List的sort方法指南
2014/09/01 Python
python中__call__方法示例分析
2014/10/11 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python代码实现图书管理系统
2020/11/30 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
党员个人思想汇报
2013/12/28 职场文书
安全责任书怎么写
2014/07/28 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
产品调价通知函
2015/04/20 职场文书
2015年项目工作总结
2015/04/29 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang