Canvas实现圆形进度条(按照时间3分钟为生命线，每秒显示进度)

不知名It水手

已于 2022-08-20 19:02:26 修改

阅读量490

点赞数

文章标签： echarts javascript 算法

于 2021-11-28 13:51:07 首次发布

原文链接：https://www.cnblogs.com/moqiutao/p/6430079.html

版权

Canvas实现圆形进度条(按照时间3分钟为生命线，每秒显示进度)

1.原作者来源：https://www.cnblogs.com/moqiutao/p/6430079.html
2.本文主要记录一下如何根据三分钟为单位，展示每秒的进度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条并显示数字百分比(3分钟刷新)</title>

<style>
*{margin:0;padding:0;}
body{text-align:center;}
</style>

</head>
<body>

<canvas id="canvas" width="500" height="500" style="background:#000;text-align: center;" ></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/180, //将360度分成180份，那么每一份就是rad度
            speed = 1; //加载的快慢就靠它了 
            
        //绘制5像素宽的运动外圈
        function floorOuter(n){
            context.save();
            context.strokeStyle = "#266090"; //设置描边样式
            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 outerCircle(){
            context.save();
            context.beginPath();
            context.lineWidth = 2; //设置线宽
            context.strokeStyle = "#86D9FF";
            context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }  
          //百分比文字绘制
          function text(n){
            console.log(n/180);
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = "#fff"; //设置描边样式
            context.font = "40px Arial"; //设置字体大小和字体
            //绘制字体，并且指定位置
            context.strokeText((n/180*100).toFixed(2)+"%", centerX-45, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        } 
        //动画循环
        (function drawFrame(){
            context.clearRect(0, 0, canvas.width, canvas.height);
            outerCircle();
            floorOuter(speed);
            if(speed >= 180) speed = 0;
             speed += 1;
        }());
		setInterval(() => {
			context.clearRect(0, 0, canvas.width, canvas.height);
            outerCircle();
            text(speed);
            floorOuter(speed);
		//	console.log(speed);
            if(speed >= 180) speed = 0;
            speed += 1;
		}, 1000);
    }
</script>

</body>
</html>

效果如下：
在这里插入图片描述
二、复杂一点的需求简记

代码如下：

 function initCanvas(el, num, color, color2) {
    var canvas = document.getElementById(el);  //获取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 = num; //加载的快慢就靠它了
    function blueCircle(n) {
      context.save();
      //渐变色设置
      var gr = context.createLinearGradient(0, 0, 0, 100);
      gr.addColorStop(0, color);
      gr.addColorStop(.5, color);
      gr.addColorStop(1, color2);
      context.strokeStyle = gr; //设置描边样式
      context.lineWidth = 13; //设置线宽
      context.beginPath(); //路径开始
      context.arc(centerX, centerY, 60, -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 = 13; //设置线宽
      context.strokeStyle = "#202449";
      context.arc(centerX, centerY, 60, 0, Math.PI * 2, false);
      context.stroke();
      context.closePath();
      context.restore();
    }
    function text(n) {
      //context.strokeStyle = "#fff"; //设置描边样式
      context.font = "28px Arial"; //设置字体大小和字体
      context.fillStyle = "#fff"
      //绘制字体，并且指定位置
      var x = centerX - 30;
      if (n.toString().length == 1) {
        x = centerX - 12
      } else if (n.toString().length == 2) {
        x = centerX - 18
      }
      context.fillText(n + "%", x, centerY + 22);
    }
    //动画循环
    (function drawFrame() {

      context.clearRect(0, 0, canvas.width, canvas.height);
      whiteCircle();
      blueCircle(speed);
      text(num);
    }());
  }
  //赋值半径大小；
  function initWidth() {
    var _width = $('.percent').width()
    var c2 = document.getElementById("canvas1");
    var c3 = document.getElementById("canvas2");
    var c4 = document.getElementById("canvas3");
    c2.style.width = _width / 4.5 + 'px';
    c3.style.width = _width / 4.5 + 'px';
    c4.style.width = _width / 4.5 + 'px';
    c2.style.height = _width / 9 + 'px';
    c3.style.height = _width / 9 + 'px';
    c4.style.height = _width / 9 + 'px';
  }