Canvas 圆弧进度条绘制：用代码打造灵动圆环

在Web开发中，使用HTML Canvas元素绘制图形和动画是一个强大的工具。今天，我们将探索如何利用Canvas绘制一个灵动的圆弧进度条，让你轻松实现各种进度展示需求。

绘制基础

要在Canvas上绘制圆弧，需要使用arc()方法。该方法接收以下参数：

• 中心点坐标（x、y）
• 半径（r）
• 起始角度（arcStart，以弧度表示）
• 结束角度（arcEnd，以弧度表示）
• 顺时针绘制（counterclockwise，默认为true）

使用这些参数，我们可以绘制一个基本的圆弧：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置圆弧参数
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var arcStart = 0;
var arcEnd = Math.PI;

// 绘制圆弧
ctx.beginPath();
ctx.arc(x, y, radius, arcStart, arcEnd);
ctx.stroke();

动态更新进度

为了绘制一个动态更新进度的圆弧进度条，我们需要使用setInterval()或requestAnimationFrame()函数不断更新arcEnd参数。

var progress = 0;

// 每秒更新进度
setInterval(function() {
  // 进度增加
  progress += 0.05;

  // 限制进度在0-1之间
  progress = Math.min(1, Math.max(0, progress));

  // 根据进度计算结束角度
  arcEnd = Math.PI * 2 * progress;

  // 重新绘制圆弧
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, arcStart, arcEnd);
  ctx.stroke();
}, 1000 / 60);

自适应大小

为了让进度条自适应不同大小的画布，我们需要调整radius参数。

// 获取画布大小
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// 计算自适应半径
var radius = Math.min(canvasWidth / 2, canvasHeight / 2);