微信小程式 canvas 實現圓形進度條

2021-09-25 09:35:38 字數 1478 閱讀 6295

先放效果圖，如下：

對於圓形進度條中間的文字，如果是簡單的，可以用它自帶的屬性去填充。 比較複雜的，就可以像下面，通過樣式將文字定位到圓形進度條中間合適位置。

}


總數量
wxss檔案樣式如下：

.circlepage


.wrap 


.circletext


.num 


.line 


.text 


.canvas


.progress
1）繪製白色圓形背景drawcirclebg(),該方法用於繪製白色圓形背景，第乙個引數為prefix為canvas標籤的canvas-id屬性值，第二引數為資料，在此方法中暫時用不到。

在此方法中，重點是cxt_arc.arc(50, 40, 33, 0, 2 * math.pi, false);看注釋每個引數所代表的意思。在圓形中間文字樣式比較複雜時，是在外面標籤中寫，然後再通過樣式定位到圓形中間，這過程中，可以結合cxt_arc.arc中的第乙個引數（圓心的x座標）和第二個引數（圓心的y座標）進行調整。

繪製完後，呼叫drawcirclepg()方法繪製橙色圓形進度條。

//繪製白色圓形背景


drawcirclebg: function (prefix, data) ,
2）繪製橙色進度條該方法中，cxt_arc.arc中的第四個引數【起始弧度】和第五個引數【終止弧度】。

看官方api文件中（如下圖中。圓形的起始在右邊（3點鐘方向），但是一般我們都是以「12點鐘方向」為起始點。因此，在該屬性的第四個引數中將0改為「-0.5 * math.pi」就可以了，而相應的，終止點也需要減掉「-0.5 * math.pi」，具體看如下**。

//繪製橙色進度條


drawcirclepg: function (prefix, data) ,
全部js檔案**如下：

page(,


/*** 生命週期函式--監聽頁面載入


*/onload: function (options) 


that.drawcirclebg('canvas',data);


},//繪製白色圓形背景


drawcirclebg: function (prefix, data) ,


//繪製橙色進度條


drawcirclepg: function (prefix, data) ,


})

微信小程式 使用canvas畫圓形倒計時

先來效果圖 wxml頁面 view class container view class progress box canvas class progress bg canvas id canvasprogressbg canvas canvas class progress canvas canv...

WeZRender 微信小程式Canvas增強元件

canvas增強元件，基於html5 canvas類庫zrender。wxml canvas js var wezrender require lib wezrender zr wezrender.zrender.init line canvas 1 375,600 資料驅動 利用wezrender...

微信小程式之canvas

initcanvas 複製 rem px 複製 opt.x opt.y x,y是矩形的起點 opt.w opt.h w,h是矩形的寬高 opt.color 顏色 ffffff opt.opacity 透明度 1 opt.fill 是否填充 false drawrect opt else ctx.re...