【微信小程序】 canvas控件与html中canvas的不同_微信小程序的canvas和html的canvas有什么区别

在微信小程序中也拥有和html中作用相同的canvas控件

在一次使用过程中 需要在绘制的图上显示文字 但出现了问题

使用以下两种结构 绘图始终会盖在文字上层

<canvas></canvas> 
<view> </view>
1
2

<canvas>
<view> </view>
</canvas> 

1
2
3
4

canvas及view均设置了position:absolute属性
且canvas的z-index:2 view的z-index:3

该结构在html中可以正常使用

后发现无论如何设置z轴 向其上增加多少各种类型的控件 canvas始终显示在最上

即微信小程序的canvas存在即拥有最高层级且无法被二设

==============================================================

在一次绘制扇形进度条的时候 进行如下绘制

          cxt_arc_bg.arc(106, 106, 80, -Math.PI/2,Math.PI*2, false); 
          cxt_arc_bg.lineTo(106, 106)
          cxt_arc_bg.setFillStyle('#aaaaaa');
          cxt_arc_bg.fill();
          cxt_arc_bg.draw();

          cxt_arc.arc(106, 106, 80, -Math.PI/2, Math.PI/180*360*deal_list[i].progress_point/100-Math.PI/2, false); 
          cxt_arc.lineTo(106, 106);  
          cxt_arc.setFillStyle('#FEAE1B');
          cxt_arc.fill();
          cxt_arc.draw();
1
2
3
4
5
6
7
8
9
10
11

cxt_arc_bg为背景灰色整圆 cxt_arc显示进度占比的扇形

编译后却发现背景始终只显示1/4扇形

检查后发现cxt_arc_bg.arc(106, 106, 80, -Math.PI/2,Math.PI*2, false); 这句中的结束弧度是有问题的

在html中若这样绘制 会显示一个整圆再多1/4扇形 由于没有颜色叠加 最后显示的还是一个整圆，而在微信小程序中 当弧度绘制超过Math.PI*2后会从0开始重新绘制 所以就会只显示了1/4扇形

改为下面这样就可以了

          cxt_arc_bg.arc(106, 106, 80, -Math.PI/2,Math.PI*2-Math.PI/2, false); 
          cxt_arc_bg.lineTo(106, 106)
          cxt_arc_bg.setFillStyle('#aaaaaa');
          cxt_arc_bg.fill();
          cxt_arc_bg.draw();
1
2
3
4
5