快捷導(dǎo)航

微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條

更新時(shí)間：2022年06月30日 09:06:16 作者：星星之火M

這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序用canvas實(shí)現(xiàn)圓形進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下

先放效果圖，如下：

1. wxml文件代碼如下

對(duì)于圓形進(jìn)度條中間的文字，如果是簡(jiǎn)單的，可以用它自帶的屬性去填充。比較復(fù)雜的，就可以像下面，通過(guò)樣式將文字定位到圓形進(jìn)度條中間合適位置。

<view class='circlePage'>
? <view class='wrap'>
? ? <!-- 圓形中間的文字 -->
? ? <view class="circleText">
? ? ? <text class='num'>{{total}}</text>
? ? ? <view class='line'></view>
? ? ? <text class="text">總數(shù)量</text>
? ? </view>
? ? <!-- 第一個(gè)canvas用于繪制白色圓形 第二個(gè)canvas用于繪制橙色圓形進(jìn)度條 -->
? ? <canvas canvas-id='canvas' class="canvas progress"></canvas>
? ? <canvas canvas-id='canvas_p' class="canvas" />
? </view>
</view>

wxss文件樣式如下：

.circlePage{
? background:#00B26A;
? padding: 20rpx 0;
}
.wrap {
? position:relative;
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: center;
}
.circleText{
? text-align:center;
? position:absolute;
? display: flex;
? flex-direction: column;
? justify-content: center;
? align-items: center;
}
.num {
? font-size: 16px;
? font-weight: 200;
? color: #fff;
? line-height: 12px;
}
?
.line {
? width: 70rpx;
? height: 2rpx;
? background: rgba(255, 255, 255, 0.4);
? margin-top: 12rpx;
? margin-bottom: 9rpx;
}
.text {
? font-size: 12px;
? font-weight: 200;
? color: #fff;
? line-height: 12px;
}
.canvas{
? width: 200rpx;?
? height: 200rpx;
}
.progress {
? position: absolute;
}

2. js文件

1）繪制白色圓形背景

drawCircleBg(),該方法用于繪制白色圓形背景，第一個(gè)參數(shù)為prefix為canvas標(biāo)簽的canvas-id屬性值，第二參數(shù)為數(shù)據(jù)，在此方法中暫時(shí)用不到。

在此方法中，重點(diǎn)是cxt_arc.arc(50, 40, 33, 0, 2 * Math.PI, false);看注釋每個(gè)參數(shù)所代表的意思。在圓形中間文字樣式比較復(fù)雜時(shí)，是在外面標(biāo)簽中寫(xiě)，然后再通過(guò)樣式定位到圓形中間，這過(guò)程中，可以結(jié)合cxt_arc.arc中的第一個(gè)參數(shù)（圓心的x坐標(biāo)）和第二個(gè)參數(shù)（圓心的y坐標(biāo)）進(jìn)行調(diào)整。

繪制完后，調(diào)用drawCirclePg()方法繪制橙色圓形進(jìn)度條。

//繪制白色圓形背景
? drawCircleBg: function (prefix, data) {
? ? var that = this;
? ? //創(chuàng)建并返回繪圖上下文context對(duì)象。
? ? let cxt_arc = wx.createCanvasContext(prefix);
? ? cxt_arc.setLineWidth(4); //線(xiàn)條的寬度
? ? cxt_arc.setStrokeStyle('#FFFFFF');//邊框顏色
? ? cxt_arc.setLineCap('round');
? ? cxt_arc.beginPath();
? ? // 參數(shù)分別：圓心的x坐標(biāo)；圓心的y坐標(biāo)；圓半徑；起始弧度，單位弧度（在3點(diǎn)鐘方向）；終止弧度；弧度的方向是否是逆時(shí)針
? ? cxt_arc.arc(50, 52, 33, 0, 2 * Math.PI, false);//創(chuàng)建一條弧線(xiàn)
? ? cxt_arc.stroke(); //對(duì)當(dāng)前路徑進(jìn)行描邊
? ? cxt_arc.draw();
? ? that.drawCirclePg(prefix, data);
? },

2）繪制橙色進(jìn)度條

該方法中，cxt_arc.arc中的第四個(gè)參數(shù)【起始弧度】和第五個(gè)參數(shù)【終止弧度】。

看官方api文檔中，如下圖中。圓形的起始在右邊（3點(diǎn)鐘方向），但是一般我們都是以“12點(diǎn)鐘方向”為起始點(diǎn)。因此，在該屬性的第四個(gè)參數(shù)中將0改為“-0.5 * Math.PI”就可以了，而相應(yīng)的，終止點(diǎn)也需要減掉“-0.5 * Math.PI”，具體看如下代碼。

//繪制橙色進(jìn)度條
? drawCirclePg: function (prefix, data) {
? ? console.log(data);
? ? var that = this;
? ? //創(chuàng)建并返回繪圖上下文context對(duì)象。
? ? let cxt_arc = wx.createCanvasContext(prefix + '_p');
? ? var value = (data.num / data.total) * 2;
? ? console.log(value);
? ? cxt_arc.setLineWidth(6);
? ? cxt_arc.setStrokeStyle('#FFC000');
? ? cxt_arc.setLineCap('round');
? ? cxt_arc.beginPath();
? ? cxt_arc.arc(50, 52, 33, -0.5 * Math.PI, Math.PI * (value - 0.5), false);
? ? cxt_arc.stroke();
? ? cxt_arc.draw();
? },

全部js文件代碼如下：

Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? total:10,
? ? num:3,
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
? ? var that = this;
? ? var data={
? ? ? total:this.data.total,
? ? ? num:this.data.num
? ? }
? ? that.drawCircleBg('canvas',data);
? },
? //繪制白色圓形背景
? drawCircleBg: function (prefix, data) {
? ? var that = this;
? ? //創(chuàng)建并返回繪圖上下文context對(duì)象。
? ? let cxt_arc = wx.createCanvasContext(prefix);
? ? cxt_arc.setLineWidth(4); //線(xiàn)條的寬度
? ? cxt_arc.setStrokeStyle('#FFFFFF');//邊框顏色
? ? cxt_arc.setLineCap('round');
? ? cxt_arc.beginPath();
? ? // 參數(shù)分別：圓心的x坐標(biāo)；圓心的y坐標(biāo)；圓半徑；起始弧度，單位弧度（在3點(diǎn)鐘方向）；終止弧度；弧度的方向是否是逆時(shí)針
? ? cxt_arc.arc(50, 40, 33, 0, 2 * Math.PI, false);//創(chuàng)建一條弧線(xiàn)
? ? cxt_arc.stroke(); //對(duì)當(dāng)前路徑進(jìn)行描邊
? ? cxt_arc.draw();
? ? that.drawCirclePg(prefix, data);
? },
? //繪制橙色進(jìn)度條
? drawCirclePg: function (prefix, data) {
? ? console.log(data);
? ? var that = this;
? ? //創(chuàng)建并返回繪圖上下文context對(duì)象。
? ? let cxt_arc = wx.createCanvasContext(prefix + '_p');
? ? var value = (data.num / data.total) * 2;
? ? console.log(value);
? ? cxt_arc.setLineWidth(6);
? ? cxt_arc.setStrokeStyle('#FFC000');
? ? cxt_arc.setLineCap('round');
? ? cxt_arc.beginPath();
? ? cxt_arc.arc(50, 39, 33, -0.5 * Math.PI, Math.PI * (value - 0.5), false);
? ? cxt_arc.stroke();
? ? cxt_arc.draw();
? },
})
?

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: