canvas2d绘制本地图片,模拟器上可以显示,但真机调试和真机预览均无法显示
发布于 2 年前 作者 xiuying64 5170 次浏览 来自 分享

在网上查询一段时间后,总结网上几个回答:(这些经测试均不起作用)

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调大即可。

2 回复

我这边有一个问题 真机调试上图片大小正常 ,上线就显示不正常了,ios的

图片显示不出来还有一种可能是图片太大,加载不出来,试着将图片大小调小一些

回到顶部