uniapp實現環形進度條
阿新 • • 發佈:2022-03-17
程式碼
<canvas style="width: 84px; height: 84px;" canvas-id="circlefCanvas" id="circlefCanvas"></canvas>
/** * 環形進度條 * arc(x, y, r, startAngle, endAngle, anticlockwise): * 以(x, y) 為圓心,以r 為半徑,90°代表0.5 * PI * 從 startAngle 弧度開始到endAngle弧度結束。 * anticlosewise 是布林值,true 表示逆時針,false 表示順時針(預設是順時針 */ const circleProgressbar = (score: string, value: number) => { // 畫整個圓環 const ctx = uni.createCanvasContext('circlefCanvas') ctx.beginPath() ctx.arc(42, 42, 30, 0, 2 * Math.PI) // 42為canvas寬度一班代表居中 ctx.setStrokeStyle('#FAF7F7') ctx.setLineWidth(5) ctx.stroke() // 進度 ctx.beginPath() ctx.arc(42, 42, 30, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#E8736F') ctx.setLineWidth(5) ctx.stroke() // 中心字型 ctx.setFillStyle('E8736F') ctx.setFontSize(17) ctx.setTextAlign('center') ctx.fillText(`${score}分`, 42, 50) ctx.stroke() ctx.draw() }