canvas绘制圆形进度条

最新推荐文章于 2022-12-26 15:07:32 发布

qq_24618061

最新推荐文章于 2022-12-26 15:07:32 发布

阅读量566

点赞数 1

分类专栏： web前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_24618061/article/details/121566443

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客展示了如何利用HTML5的Canvas API绘制一个动态的圆形进度条，通过改变颜色和文本来实时更新进度。代码中设置了定时器，逐步增加圆弧的角度，根据角度范围改变进度条颜色，并居中显示百分比文本。当达到特定进度时，定时器自动停止。

摘要由CSDN通过智能技术生成

使用了H5中canvas绘制圆弧，文本，清除内容，搭配定时器灵活控制，从而实时改变其颜色和文本。

绘制文本时需要注意文本上下左右的居中，简单计算下就行。

完整代码如下：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas {
      background: #efefef;
    }
  </style>
 </head>
 <body>
  <h1>绘制圆形进度条</h1>     
  <canvas id="canvas4" width="500" height="500"></canvas>
  <script>
  var ctx = canvas4.getContext('2d');
  ctx.lineWidth = 30;
  ctx.font = '60px SimHei';
  var start = -90;
  var end = -90;

  var timer = setInterval(function(){
    //此处可以不清除已有内容
    ctx.clearRect(0,0,500,500);

    end += 10;
    //绘制圆弧
    ctx.beginPath();
    ctx.arc(250,250,100,start*Math.PI/180,end*Math.PI/180);
    if(end-start<120){    //1/3范围内
      ctx.strokeStyle = 'red';
      ctx.fillStyle = 'red';
    }else if(end-start<240){  //1/3~2/3范围内
      ctx.strokeStyle = 'orange';
      ctx.fillStyle = 'orange';
    }else { //2/3~3/3范围内
      ctx.strokeStyle = 'green';
      ctx.fillStyle = 'green';
    }
    ctx.stroke();

    //绘制文字
    var percentage = Math.floor((end-start)/360*100) + '%';
    var txtWidth = ctx.measureText(percentage).width; //获得文字的宽度
    ctx.fillText(percentage, 250-txtWidth/2, 250+30-10);  //绘制文本



    if(end>=270){
      clearInterval(timer);
    }
  }, 200)
  </script>
 </body>
</html>