微信小程序 canvas控件与html中canvas的不同
来源:互联网 发布:java.nio jar包下载 编辑:程序博客网 时间:2024/06/05 00:17
在微信小程序中也拥有和html中作用相同的canvas控件
在一次使用过程中 需要在绘制的图上显示文字 但出现了问题
使用以下两种结构 绘图始终会盖在文字上层
<canvas></canvas> <view> </view>
<canvas><view> </view></canvas>
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();
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();
0 0
- 微信小程序 canvas控件与html中canvas的不同
- Canvas与自定义控件
- html中canvas遇到的问题
- 自定义控件-Canvas的绘制与操作
- HTML中canvas画直线
- 微信小程序 canvas API
- 微信小程序 绘图 canvas
- HTML5中Canvas与SVG的比较
- Canvas中svae()与restore()的使用
- HTML5中Canvas与SVG的画图
- 初学canvas,canvas.save()与canvas.restore()的作用
- Html canvas的width、height与在style中设置宽高的区别
- Canvas与Canvas Scaler
- HTML的一个Canvas实例
- 控件的Canvas的使用
- 滑动解锁 android Canvas自定义控件中硬件加速引起的canvas.clipPath问题
- HTML5 Canvas: 在HTML页面中添加Canvas
- Canvas 入门5 在Canvas中使用HTML元素
- 微信小程序中图片占满整个屏幕实现方法
- javaWeb 中的四个域
- 改变Xcode编码区域背景颜色
- Android关于友盟推送 与百度地图、阿里支付的冲突解决问题
- 2016新录的框架录像
- 微信小程序 canvas控件与html中canvas的不同
- Android默认输入法
- Android 使用JDBC连接数据库
- h.264语法结构分析
- NVIDIA Jetson TX1(5)
- Author Topic Model[ATM理解及公式推导]
- java中注解的使用与实例 (二)
- Windows环境安装及配置MongoDB
- 使用getIdentifier()获取资源Id