有没有办法在html5画布上显示html元素“进度”？

<canvas id="progressCanvas" width="400" height="40"></canvas>

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

var progress = 0; // 初始进度为0

function drawProgressBar() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

  // 绘制进度条背景
  ctx.fillStyle = "#f2f2f2";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制进度条填充
  ctx.fillStyle = "#00aaff";
  var fillWidth = progress / 100 * canvas.width;
  ctx.fillRect(0, 0, fillWidth, canvas.height);

  // 绘制进度文本
  ctx.fillStyle = "#000";
  ctx.font = "16px Arial";
  ctx.fillText(progress + "%", 10, 25);
}

function updateProgress() {
  if (progress < 100) {
    progress += 1; // 每次更新增加1
    drawProgressBar(); // 重新绘制进度条
  }
}

setInterval(updateProgress, 100); // 每100毫秒更新一次进度