在网上查询一段时间后,总结网上几个回答:(这些经测试均不起作用)
1、先下载,保存临时路径。这个是针对网络图片,而我的是本地图片,即使我将本地图片换成网络图片再保存临时地址,也无法显示。
2、删除type=‘2d’ || 采用旧版本的canvas 。在html的标签中删除type='2d’就意味着不采用新版本而是旧版本,网上有人通过此方法曲线救国,但在我这里依然行不通,且在此之前做小程序时用的canvas,性能不如人意,这次尝试用canvas2d。
3、调试时切换为2.0。虽然我不怎么喜欢用真机调试,毕竟调试时是电脑环境,真发布还得是手机环境,还得是真机预览,但我尝试用真机调试2.0去测的时候,依然无法显示。
然后我的解决方法是,改变canvas的z-index,没错,就是这么简单。由于界面的设计较为复杂,同一页面中有好多view,很容易将canvas遮住。关键来了,模拟器上canvas如果不设置z-index,默认在最上面(也即最前面),而且不会影响下面的组件的交互操作,但是手机上不是,它默认在最下面(或许,也可能不是最下面,但反正不是最前面)。问题找到就好解决了。
首先给canvas加一个数据绑定,动态设置z-index,开始如果没有动画则把z-index设为0(或较小的数字),这样不会影响其他组件的交互,如果z-index太大,下面的组件就无法交互了;当需要在canvas上绘制图片时,将z-index调大即可。