在小程序中為我們提供了canvas畫(huà)圖的方法：
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
參數(shù)說(shuō)明

number x  // 圓心的 x 坐標(biāo)
number y // 圓心的 y 坐標(biāo)
number r // 圓的半徑
number sAngle // 起始弧度，單位弧度（在3點(diǎn)鐘方向）
number eAngle // 終止弧度
boolean counterclockwise // 弧度的方向是否是逆時(shí)針

我們來(lái)看看弧線(xiàn)的坐標(biāo)圖

針對(duì) arc(100, 75, 50, 0, 1.5 * Math.PI)的三個(gè)關(guān)鍵坐標(biāo)如下：
綠色: 圓心 (100, 75)
紅色: 起始弧度 (0)
藍(lán)色: 終止弧度 (1.5 * Math.PI)

下載.png

代碼實(shí)例：畫(huà)圓弧型進(jìn)度條

<template>
<canvas class="canvas" style="width: 300px; height: 133px;margin: 0 auto;"
 canvas-id="myCanvas" disable-scroll='true'></canvas>
</template>
<script>
progress () {
    //總弧線(xiàn)從0.9*PI畫(huà)到0.1*PI == 216度
    // 分?jǐn)?shù)所對(duì)應(yīng)的度數(shù) 1000分 == 216度
    let left = this.score * (216/1000)
    // 分?jǐn)?shù)對(duì)應(yīng)弧度（結(jié)束點(diǎn)）
    let left_end = 0.9 + (0.5/90) * left
    
    const ctx = wx.createCanvasContext('myCanvas')
    // 畫(huà)圓環(huán)
    ctx.beginPath()
    ctx.arc(150, 90, 75, left_end*Math.PI, 0.1 * Math.PI)
    ctx.setStrokeStyle('#288DBC') // 弧線(xiàn)的顏色
    ctx.setLineWidth("8") // 弧的寬度
    ctx.setLineCap("round") //線(xiàn)條結(jié)束端點(diǎn)樣式 butt 平直 round 圓形 square 正方形 
    ctx.stroke()

    // 畫(huà)進(jìn)度條
    ctx.beginPath()
    ctx.arc(150, 90, 75, 0.9*Math.PI, left_end * Math.PI)
    ctx.setStrokeStyle('#FFF')
    ctx.setLineWidth("8")
    ctx.setLineCap("round");
    ctx.stroke()
   
    ctx.setFontSize(15)
    ctx.setFillStyle('#FFF') // 文字的顏色
    ctx.fillText(this.level_desc, 120, 60)
    ctx.setTextAlign("center");  // 字體位置
    ctx.setTextBaseline("middle");  // 文字基線(xiàn)

    ctx.setFontSize(50)
    ctx.setFillStyle('#FFF')
    ctx.fillText(this.score, 150, 100)
    ctx.setTextAlign("center");  // 字體位置
    ctx.draw()
  }
  </script>

效果

實(shí)例圖.jpeg