JavaScript Canvas 复刻苹果发布会环形进度条

<div class="container">
  <canvas id="canvas" width="600" height="600">
    <p>抱歉，您的浏览器不支持canvas</p>
  </canvas>
</div>

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d") // 上下文对象
let circleX = canvas.width / 2 // 中心x坐标
let circleY = canvas.height / 2 // 中心y坐标
let radius = 100 // 圆环半径
let percent = 90 // 最终百分比
let lineWidth = 1 // 圆形线条的宽度
let fontSize = 42 // 字体大小

// 画圆
function circle(cx, cy, r) {
  ctx.beginPath()
  // ctx.moveTo(cx, cy-r-10)
  ctx.lineWidth = lineWidth
  ctx.strokeStyle = "#666"
  ctx.lineCap = "round"
  ctx.shadowColor = "#000" //设置阴影颜色
  ctx.shadowBlur = 0 //设置模糊值
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.arc(cx, cy, r + 10, 0, (Math.PI / 180) * 360)
  ctx.moveTo(cx + r, cy)
  // ctx.moveTo(cx, cy-r)
  ctx.arc(cx, cy, r, 0, (Math.PI / 180) * 360)
  ctx.stroke()
}

// 画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
  ctx.beginPath()
  ctx.moveTo(cx, cy - r - 5) // 从圆形底部开始画
  ctx.lineWidth = 12
  ctx.strokeStyle = "#ffccff"
  // ctx.fillStyle = '#ffccff'
  // 圆弧两端的样式
  ctx.lineCap = "round"
  ctx.shadowColor = "#ff6699" //设置阴影颜色
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4 //设置模糊值

  // 圆弧
  ctx.arc(
    cx,
    cy,
    r + 5,
    startAngle * (Math.PI / 180.0) - Math.PI / 2,
    endAngle * (Math.PI / 180.0) - Math.PI / 2,
    anti
  );
  ctx.moveTo(cx, cy - r) // 从圆形底部开始画
  ctx.moveTo(cx, cy - r) // 从圆形底部开始画
  ctx.stroke()
}

// 刷新
function loading(n) {
  // 清除canvas内容
  ctx.clearRect(0, 0, circleX * 2, circleY * 2)

  // 中间的字
  ctx.font = fontSize + "px April"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"
  ctx.fillStyle = "#ffccff"
  ctx.fillText(parseFloat(n).toFixed(0) + "%", circleX, circleY)

  // 圆形
  circle(circleX, circleY, radius)

  // 圆弧
  sector(circleX, circleY, radius, 0, (n / 100) * 360)
  sector2(circleX, circleY, radius, 0, (n / 100) * 360)
  // 遮盖
  cover(circleX, circleY, radius)
}

// 更新进度
function changeProcess(val, times) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      loading(val)
      resolve()
    }, times)
  })
}

// 循环
async function loop(val) {
  while (true) {
    for (let i = 0; i < val; i++) {
      await changeProcess(i + 1, 1000);
    }
    return
  }
}

loop(percent)