canvas 真是一個好東西，它給前端插上了想象的翅膀，伴隨著 h5 而來，將 web 代入了新的領(lǐng)域，基于canvas 技術(shù)實現(xiàn)的各種酷炫效果和2d、3d 游戲，也讓瀏覽器能承載更加強大的功能。尤其是它性能還很好，搞游戲再合適不過了，我就喜歡用 canvas 寫一些小游戲玩。

在線地址

最近無意中看到前段時間寫的這個小效果，覺得挺有意思的，就分享出來；這是蘋果ios 12 發(fā)布會上庫克 ppt 里展示的內(nèi)容，一個帶熒光效果的環(huán)形進度條；一個接外包項目的朋友，遇到客戶指定要這個效果，實在搞不定了找到我，于是才有了下面的復(fù)刻實現(xiàn)。

基礎(chǔ) Dom 結(jié)構(gòu)

第一步先把標(biāo)簽元素寫上，后面將據(jù)此生成畫布上下文對象，canvas 標(biāo)簽內(nèi)的內(nèi)容將在瀏覽器不支持的情況下顯示，否則會自動忽略。

<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坐標(biāo)
let circleY = canvas.height / 2 // 中心y坐標(biāo)
let radius = 100 // 圓環(huán)半徑
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" //設(shè)置陰影顏色
  ctx.shadowBlur = 0 //設(shè)置模糊值
  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" //設(shè)置陰影顏色
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.shadowBlur = 4 //設(shè)置模糊值

  // 圓弧
  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()
}

讓畫面動起來

通過定時執(zhí)行刷新動作，來實現(xiàn)進度條的數(shù)據(jù)更新和畫布重繪，可以使用 while 循環(huán)配合 async await setTimeout 異步來實現(xiàn)幀率控制

// 刷新
function loading(n) {
  // 清除canvas內(nèi)容
  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)
  })
}

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

loop(percent)

總結(jié)

通過 canvas 提供的 arc api 結(jié)合樣式配置，100 行左右的代碼實現(xiàn)了蘋果發(fā)布會上的這個效果，是不是很有意思吶。

到此這篇關(guān)于JavaScript canvas復(fù)刻蘋果發(fā)布會環(huán)形進度條的文章就介紹到這了,更多相關(guān)JavaScript canvas進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: