正文

html5动画：canvas实现圆形进度条并显示数字百分比

风雨后见彩虹  2022-02-07  216

关键词：

实现效果

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+js实现❤️canvas圆形水波进度条动画特效❤️(代码片段)

🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅欢迎点赞👍收藏⭐留言📝 效果演示&#x... 查看详情

h5canvas实现圆形时间倒计时进度条(代码片段)

...到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间文字能够有颜色渐变效果... 查看详情

h5canvas实现圆形时间倒计时进度条(代码片段)

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：查看详情

如何在jsp和servlet中显示文件上传进度条并实现了多部分过滤器？

】如何在jsp和servlet中显示文件上传进度条并实现了多部分过滤器？【英文标题】：Howtoshowafileuploadprogressbarinjspandservletwithamultipartfilterimplemented?【发布时间】：2013-02-2715:57:41【问题描述】：我正在使用jsp和servlet处理文件上传任务... 查看详情

如何使用逆时针动画显示自定义圆形进度条？

】如何使用逆时针动画显示自定义圆形进度条？【英文标题】：HowtodisplaycustomcircularprogressbarwithAnti-Clockwiseanimation?【发布时间】：2014-07-0313:54:48【问题描述】：我正在使用与测验相关的应用程序。此处将显示自定义圆形进度条，... 查看详情

android之自定义圆形进度条

...作时，会通过展示一个进度条来显示“加载中...”的动画作为友好页面以提高用户体验。对于这样的进度条，最简单的实现方式就是通过美工给我们切几张不同的图片，最后通过帧动画的方式来实现。通过帧动画实现... 查看详情

如何只实现一个圆形进度条，直到图像被滑动加载

...8-2406:49:15【问题描述】：您好，我只想实现一个圆形进度动画，直到从滑行加载图像，但是在占位符中实现动画后，它为每个单独的图像提供动画，并且图像更改为占位符图像大小，我没有想要我希望布局的中心应该只有一个圆查看详情

js+html5实现canvas绘制椭圆形图案的方法

...在另一个显式的画布，以使园变成椭圆。3、进而，加进动画功能。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>测试颜色背景</title><script>varticker=0;varcol=newArray("#000... 查看详情

androidui系列-view实现圆形进度条

我就不从canvas和paint开始说了，onMeasure,onLayout,onDraw这些方法的介绍和源码解析。网上一搜很多。一篇解释不清楚，多看几篇。话不多说了，先看看效果吧。做成gif显示会有问题。我们先来分析一下需要什么数据、1、... 查看详情

异步下载圆形进度条显示进度

圆形进度条参考链接即可：使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度：1.圆形进度条参考以上链接，有点小瑕疵，可更改定位距离实现重合。 2.遮罩层：.lbOverlay{ display:none; position:fixed; left:0; ... 查看详情

如何用html5的canvas制作3d动画效果

HTML5的诞生给web前端界带来了不小轰动，像什么动画旋转、图片滑块、图片轮播等等这些3D特效，也引发了不少朋友想要学习HTML5的好奇心。最近我一直在做canvas动画效果，发现canvas这个东西做动画不是不可以。相对于flash，它太... 查看详情

canvas动态画圆弧及requestanimationframe(代码片段)

...和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。相关函数：context.arc(x,y,r,sAngle,eAngle,counterclockwise); 效果展示：查看详情

canvas绘制圆形进度条

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>canvas圆形进度条效果</title><style>*{margin:0;padding:0;}body{text-align:center;background-color:#000; 查看详情

如何用html5的canvas制作3d动画效果

canvas动画原理与fabric实现

本章节内容主要关注如何在Canvas中绘制动画效果。在HTML5的Canvas中结合JS可以绘制雪碧图动画，动画在一些H5游戏中或者富交互的应用中被广泛使用。游戏的动画帧可以在一个单独的图片中保存，然后使用HTML5的Canvas结合JS在特定... 查看详情

凭证提供者。显示一种进度条并禁用密码或 PIN 字段

】凭证提供者。显示一种进度条并禁用密码或PIN字段【英文标题】：CredentialProvider.DisplayingakindofprogressbaranddisablingpasswordorPINfield【发布时间】：2014-09-0916:42:44【问题描述】：我正在基于Microsoft的示例http://www.microsoft.com/en-us/download/... 查看详情

html5用canvas怎么实现动画效果

...raw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。关键技术点：JavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，另外一个参数代表间隔时间，单位为毫秒数。代码示例：setTimeout(up... 查看详情