在小程序中為我們提供了canvas畫圖的方法：
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
參數(shù)說明
number x // 圓心的 x 坐標(biāo)
number y // 圓心的 y 坐標(biāo)
number r // 圓的半徑
number sAngle // 起始弧度鳞仙，單位弧度（在3點(diǎn)鐘方向）
number eAngle // 終止弧度
boolean counterclockwise // 弧度的方向是否是逆時(shí)針
我們來看看弧線的坐標(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í)例：畫圓弧型進(jìn)度條
<template>
<canvas class="canvas" style="width: 300px; height: 133px;margin: 0 auto;"
canvas-id="myCanvas" disable-scroll='true'></canvas>
</template>
<script>
progress () {
//總弧線從0.9*PI畫到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án)
ctx.beginPath()
ctx.arc(150, 90, 75, left_end*Math.PI, 0.1 * Math.PI)
ctx.setStrokeStyle('#288DBC') // 弧線的顏色
ctx.setLineWidth("8") // 弧的寬度
ctx.setLineCap("round") //線條結(jié)束端點(diǎn)樣式 butt 平直 round 圓形 square 正方形
ctx.stroke()
// 畫進(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"); // 文字基線
ctx.setFontSize(50)
ctx.setFillStyle('#FFF')
ctx.fillText(this.score, 150, 100)
ctx.setTextAlign("center"); // 字體位置
ctx.draw()
}
</script>
效果
實(shí)例圖.jpeg
