收藏
回答

安卓端异步方法中调用ctx.fillRect等方法,会清空之前画布

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小游戏 Bug ctx.fillRect 微信安卓客户端 7.0.6 2.8.1

直接把代码贴上来说吧:


//先绘制一个红色方块

ctx.fillStyle = 'Red'

ctx.fillRect(0,0,100,100)

//在一个异步函数中再画一个白色方块

setTimeout(() => {

        ctx.fillStyle = 'White'

        ctx.fillRect(100, 100,100, 100)

}, 1000)


先绘制第一红色的正方形,然后设置一个异步操作,在异步操作中绘制一个白色正方形。如果是在开发者工具或iOS上执行,会正确得到两个正方形(第二个正方形在1秒后出现)。


但在我测试用的两部华为手机上出现的情况都是:一开始有一个红色正方形,1秒之后,屏幕被清屏,白色正方形出现,红色的不见了。

拿setTimeout只是举个例子,实际上我发现无论是在requestAnimation中、图片的image.onload()监听事件中、点击操作的监听时间中还是网络请求的回调函数中,调用ctx.fillRect(或者是fillText, strokeRect等等)都会造成清屏。

也就是说只要是异步操作中绘制图案,前面绘制的内容就会被清屏。

经测试:华为Mate7、Mate10、P20上均存在该问题。开发工具、iOS端正常。

测试手机的信息:



最后一次编辑于  2019-08-23
回答关注问题邀请回答
收藏

2 个回答

  • 叶轩
    叶轩
    置顶回答2019-08-23

    这里主要是因为Android GPU双缓冲的原因,2D接口只画一次的话,第二次画的会清屏。requestAnimation 中每次都画是不会有问题的,离屏来画也不会有问题。如果有类似需求,建议离屏来画

    2019-08-23
    有用
    回复 3
    • 焦航
      焦航
      2019-08-23
      还请指点一下:离屏怎么实现,在离屏画布中画好内容之后,如何渲染到主屏上?
      2019-08-23
      回复
    • 焦航
      焦航
      2019-08-23
      是通过canvas的保存画布内容到文件的功能把离屏内容保存成图片,再在主屏上用drawImage方法来画吗?如果是这样的话,岂不是带来很多不必要的文件IO,不会卡吗?
      2019-08-23
      回复
    • 焦航
      焦航
      2019-08-23
      另外还想问一下,这个问题是否有可能在将来被修复?
      2019-08-23
      回复
  • 焦航
    焦航
    2019-08-23

    逛了一圈论坛,发现这是个老问题了:安卓端的canvas2d, 在异步重绘时总是会清屏一次。好几个帖子都在说这个:

    1. https://developers.weixin.qq.com/community/develop/doc/0000e0aa440d004763b84aa565bc00?highLine=drawImage, 这个兄弟说先画一个方块,再调用image.onload()函数加载一个image,会导致之前的方块被清除,我也遇到了。

    2. https://developers.weixin.qq.com/community/develop/doc/000a4c8814c1905d41096111a56c00?highLine=canvas   这个兄弟调的是setInterval函数,依然是每次新绘制时会清除之前的图像。

    3. https://developers.weixin.qq.com/community/develop/doc/000e4c56260230e98d482e19956400?highLine=canvas

    最早的帖子是3月份的,到现在还不解决??什么效率啊。

    2019-08-23
    有用
    回复
登录 后发表内容
问题标签