小程序canvas 2d支持同层渲染，绘制环形进度条

小程序canvas2d

1.首先因为最初绘制环形使用的是小程序canvas， wx.createCanvasContext，但是由于canvas不支持同层渲染层级过高，并且wx.createCanvasContext已停用。所以更改为type=2d，wx.createSelectorQuery()来绘制环形进度条

此外：canvas2d真机同层渲染才生效，微信开发工具有问题

如图所示：

(1)：wxml，wxss内容

<canvas style="width:{
   {canvasWidth}}rpx;height:{
   {canvasWidth}}rpx; position:relative" type="2d"  id="myCanvas" >
  <view class="circle-bar" style="height:{
   {canvasWidth}}rpx;">
    <view class="title_name" style="color: {
   {valueColor}}; ">
      {
   {
   title}}
    </view>
    <view class="title_val" style="color: {
   {valueColor}}; font-weight:{
   {f_weight}}; font-size:{
   {f_size}}rpx">
      {
   {
   value}} {
   {
   suffix}}
    </view>
  </view>
</canvas>

//wxss内容
.circle-bar{
   
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 0;
}

.circle-bar .title_name{
   
  max-height: 62rpx;
  font-size: 26rpx;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

js内容。

var windWidth = wx.getSystemInfoSync().windowWidth;
//为了适配所有屏幕，这里之前所有像素单位赋值之前都要换成以rpx为单位的大小乘以xs
const xs = windWidth / 
1
2