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的新特性介绍
Oct 31 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 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新手上路(四)
2006/10/09 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
浅谈js闭包理解
2019/03/28 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python 防止死锁的方法
2020/07/29 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
女子职高个人自荐书
2014/02/01 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS