摘要：如果不想看步驟的可以直接看最后面有完整的代碼最近在做一個(gè)圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個(gè)一個(gè)分享一下先上一個(gè)最終的效果首先畫一整個(gè)圓定義進(jìn)度為定義總進(jìn)度為定義圓的半徑為至此大圓畫完上面的代碼需要注意的是方法的

如果不想看步驟的可以直接看最后面有完整的代碼

最近在做一個(gè)圓形的進(jìn)度條，在網(wǎng)上看了一些例子有些地方不太理解，后來自己寫了個(gè)一個(gè)分享一下

先上一個(gè)最終的效果

    const cvsWitdh = 220
    const cvsHeight = 220

    const progess = 50 // 定義進(jìn)度為50
    const maxPro = 100  // 定義總進(jìn)度為100
    const r = 100 // 定義圓的半徑為100
    this.cvs.width = cvsWitdh
    this.cvs.height = cvsHeight
    const ctx = this.cvs.getContext("2d")
    ctx.lineWidth = 10
    ctx.strokeStyle = "#15496B"
    ctx.arc(r + 10, r + 10, r, 0, 2 * Math.PI) 
    ctx.stroke() // 至此大圓畫完

上面的代碼需要注意的是  arc 方法的最后一側(cè)參數(shù)是弧度(2π)不是角度，畫圓的起點(diǎn)是表的3點(diǎn)的位置開始畫的不是12點(diǎn)位置

畫圓弧度，主要是需要計(jì)算出起點(diǎn)的弧度和終點(diǎn)的弧度

    ctx.beginPath()
    ctx.lineCap = "round"
    // 下面是漸變的代碼不需要的可以換成純色
    let grd = ctx.createLinearGradient(0, 0, 220, 220)
    grd.addColorStop(0, "red")
    grd.addColorStop(1, "blue")
    ctx.strokeStyle = grd
    const startRadian = progress >= maxPro ? 0 : Math.PI * 1.5
    const rate = progress / maxPro
    const endRadian = progress >= maxPro ? 2 * Math.PI : 2 * Math.PI * rate - Math.PI / 2
    ctx.arc(r + 10, r + 10, r, startRadian, endRadian)
    ctx.stroke()

上面的代碼中  ctx.lineCap = "round" 這個(gè)是設(shè)置最終繪制的線是帶圓角的

const startRadian = progess >= maxPro ? 0 : Math.PI * 1.5

我們希望點(diǎn)的起點(diǎn)位置是鐘表12點(diǎn)鐘位置，整個(gè)圓的弧度是 2π==360° 推算得知12點(diǎn)鐘的位置是 1.5π==270°

  const rate = progress / maxPro
  const endRadian = progress >= maxPro ? 2 * Math.PI : 2 * Math.PI * rate - Math.PI / 2

const rate = progress / maxProo 得值為進(jìn)度占圓的比率
2π * rate 就是進(jìn)度所需要的弧度
由于 arc 方法畫圓的起點(diǎn)是3點(diǎn)的方向而我們的起點(diǎn)是12點(diǎn)方向所以我們還需要減掉一個(gè) Math.PI / 2最終就得出了我們上面的公式

由于當(dāng)progress等于maxPro的時(shí)候算出來的終點(diǎn)等于我們的起點(diǎn)最終畫的就會(huì)有問題，所以我們在計(jì)算起點(diǎn)終點(diǎn)的時(shí)候做了判斷 progress >= maxPro 時(shí)畫整圓

當(dāng)前效果

    let currentProgress = 1
const timer = setInterval(() => {
      if (currentProgress >= progress) {
        currentProgress = progress
        clearInterval(timer)
      }
      ctx.beginPath()
      ctx.lineCap = "round"
      // 下面是漸變的代碼不需要的可以換成純色
      let grd = ctx.createLinearGradient(0, 0, 220, 220)
      grd.addColorStop(0, "red")
      grd.addColorStop(1, "blue")
      ctx.strokeStyle = grd
      const startRadian = currentProgress >= maxPro ? 0 : Math.PI * 1.5
      const rate = currentProgress / maxPro
      const endRadian = currentProgress >= maxPro ? 2 * Math.PI : 2 * Math.PI * rate - Math.PI / 2
      ctx.arc(r + 10, r + 10, r, startRadian, endRadian)
      ctx.stroke()
      currentProgress++
    }, 10)

動(dòng)畫的實(shí)現(xiàn)也非常的簡單，我們只需定義一個(gè)臨時(shí)的進(jìn)度 currentProgress 通過定時(shí)器每次累加這個(gè)進(jìn)度知道與progress相等停止計(jì)時(shí)，期間每次繪制

我用react 寫的所以直接把react的整個(gè)代碼粘過來了，如果不需要的可以只拿繪圖的那一部分

import React from "react"

export default class Test extends React.Component {
  componentDidMount () {
    this.renderProgress(30)
  }

  renderProgress (progress) {
    const cvsWitdh = 220
    const cvsHeight = 220
    const maxPro = 100  // 定義總進(jìn)度為100
    const r = 100 // 定義圓的半徑為100
    this.cvs.width = cvsWitdh
    this.cvs.height = cvsHeight
    const ctx = this.cvs.getContext("2d")
    ctx.lineWidth = 10
    ctx.strokeStyle = "#15496B"
    ctx.arc(r + 10, r + 10, r, 0, 2 * Math.PI) // 2 * Math.PI === 360 度 最后一個(gè)參數(shù)代表的是圓的弧度
    ctx.stroke() // 至此大圓畫完
    if (progress === 0) {
      return
    }
    let currentProgress = 1
    const timer = setInterval(() => {
      if (currentProgress >= progress) {
        currentProgress = progress
        clearInterval(timer)
      }
      ctx.beginPath()
      ctx.lineCap = "round"
      // 下面是漸變的代碼不需要的可以換成純色
      let grd = ctx.createLinearGradient(0, 0, 220, 220)
      grd.addColorStop(0, "red")
      grd.addColorStop(1, "blue")
      ctx.strokeStyle = grd
      const startRadian = currentProgress >= maxPro ? 0 : Math.PI * 1.5
      const rate = currentProgress / maxPro
      const endRadian = currentProgress >= maxPro ? 2 * Math.PI : 2 * Math.PI * rate - Math.PI / 2
      ctx.arc(r + 10, r + 10, r, startRadian, endRadian)
      ctx.stroke()
      currentProgress++
    }, 10)
  }

  render () {
    return (
      

        

        

         {
            this.cvs = ref
          }}
        />

        


        

         {
          this.renderProgress(60)
        }}>重新loadprogress
      
    )
  }
}