在小程序中为我们提供了canvas画图的方法：
CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)
参数说明
number x // 圆心的 x 坐标
number y // 圆心的 y 坐标
number r // 圆的半径
number sAngle // 起始弧度，单位弧度（在3点钟方向）
number eAngle // 终止弧度
boolean counterclockwise // 弧度的方向是否是逆时针
我们来看看弧线的坐标图
针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：
绿色: 圆心 (100, 75)
红色: 起始弧度 (0)
蓝色: 终止弧度 (1.5 * Math.PI)
下载.png
代码实例：画圆弧型进度条
<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度
// 分数所对应的度数 1000分 == 216度
let left = this.score * (216/1000)
// 分数对应弧度（结束点）
let left_end = 0.9 + (0.5/90) * left
const ctx = wx.createCanvasContext('myCanvas')
// 画圆环
ctx.beginPath()
ctx.arc(150, 90, 75, left_end*Math.PI, 0.1 * Math.PI)
ctx.setStrokeStyle('#288DBC') // 弧线的颜色
ctx.setLineWidth("8") // 弧的宽度
ctx.setLineCap("round") //线条结束端点样式 butt 平直 round 圆形 square 正方形
ctx.stroke()
// 画进度条
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>
效果
实例图.jpeg
