最近做一個(gè)小程序般甲，有用到canvas畫圓環(huán)形進(jìn)度條阵苇，效果圖就是上圖了漠其。
為了方便日后使用蹲嚣，我已經(jīng)封裝了一個(gè)獨(dú)立的js文件诸老。
先簡(jiǎn)單說(shuō)一下實(shí)現(xiàn)流程岛请，封裝好的文件下載地址：https://github.com/SuperDalu/wxCanvas.git
先在wxml文件中創(chuàng)建畫布
<canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas>
在js文件中初始化畫布
const ctx2 = wx.createCanvasContext(id);
通過(guò)給canvas組件綁定boundingRect方法監(jiān)聽canvas容器的寬高
獲取到canvas容器的寬高的一半以確定圓心的位置
wx.createSelectorQuery().select('#'+id).boundingClientRect(function (rect) { //監(jiān)聽canvas的寬高
console.log(rect);
var w = parseInt(rect.width / 2); //獲取canvas寬的的一半
var h = parseInt(rect.height / 2); //獲取canvas高的一半压怠，
}).exec();
然后就可以開始畫圖掐场。
先把進(jìn)度條畫出來(lái)躯保，再去寫動(dòng)畫旋膳。
run(c, w, h) { //c是圓環(huán)進(jìn)度百分比 w，h是圓心的坐標(biāo)
let that = this;
var num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
//圓環(huán)的繪制
ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num); //繪制的動(dòng)作
ctx2.setStrokeStyle("#ff5000"); //圓環(huán)線條的顏色
ctx2.setLineWidth("16"); //圓環(huán)的粗細(xì)
ctx2.setLineCap("butt"); //圓環(huán)結(jié)束斷點(diǎn)的樣式 butt為平直邊緣 round為圓形線帽 square為正方形線帽
ctx2.stroke();
//開始繪制百分比數(shù)字
ctx2.beginPath();
ctx2.setFontSize(40); // 字體大小 注意不要加引號(hào)
ctx2.setFillStyle("#ff5000"); // 字體顏色
ctx2.setTextAlign("center"); // 字體位置
ctx2.setTextBaseline("middle"); // 字體對(duì)齊方式
ctx2.fillText(c + "%", w, h); // 文字內(nèi)容和文字坐標(biāo)
ctx2.draw();
},
實(shí)現(xiàn)動(dòng)畫效果途事。
實(shí)現(xiàn)動(dòng)畫效果其實(shí)使用定時(shí)器控制run方法一直執(zhí)行验懊。
canvasTap(start, end, time, w, h) { //傳入開始百分比和結(jié)束百分比的值擅羞，動(dòng)畫執(zhí)行的時(shí)間，還有圓心橫縱坐標(biāo)
var that = this;
start++;
if (start > end) {
return false;
}
that.run(start, w, h); //調(diào)用run方法
setTimeout(function () {
that.canvasTap(start, end, time, w, h);
}, time);
},
這就基本實(shí)現(xiàn)了圓環(huán)進(jìn)度條的繪制义图。
