Canvas 画环形进度条

最新推荐文章于 2024-07-26 15:50:48 发布

WangminzeSpk

最新推荐文章于 2024-07-26 15:50:48 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发 Javascript Canvas 文章标签： Canvas 进度条

本文链接：https://blog.youkuaiyun.com/Sparkler123/article/details/95461766

前端开发同时被 3 个专栏收录

31 篇文章

订阅专栏

Javascript

15 篇文章

订阅专栏

Canvas

1 篇文章

订阅专栏

博客展示了使用JS和HTML代码实现Canvas进度条的内容，还给出了实现后的效果图示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS代码如下：

function draw(ctx, rate) {
  ctx.clearRect(0,0,300,300);
  
  ctx.beginPath();
  ctx.strokeStyle = "gray";
  ctx.arc(150, 150, 100, (1/3)*Math.PI, (2/3)*Math.PI, true);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = "green";
  ctx.arc(150, 150, 100, (2/3)*Math.PI, (rate*5 + 2)/3*Math.PI, false);
  ctx.stroke();

  ctx.font = "30px Verdana";
  var prevStr = rate >= 0.1 ? '' : '0';
  // console.log("rate", rate);
  ctx.textAlign = "center";
  ctx.fillText(prevStr + Math.round(rate * 100) + '%',150,160);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineCap = "round";
ctx.lineWidth = 15;

var rate = 0;
setInterval(function() {
  if (rate >= 1) {
    rate = 0;
  }
  draw(ctx, rate);
  rate = Math.round((rate + 0.01) * 100) / 100;
}, 300);

HTML代码：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>

效果如图：

进度条