收藏
回答

小游戏 Canvas 绘制前被自动清屏

// 第一次创建 canvas 自动上屏
var canvas = wx.createCanvas()
var ctx = canvas.getContext('2d')
 
 
// 绘制红色背景
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, canvas.width, canvas.height)
  
wx.onTouchEnd((res) => {
  // 触摸结束后绘制蓝色小方块
  ctx.fillStyle = 'blue'
  ctx.fillRect(100, 100, 200, 200)
})

逻辑很简单吧。

期待结果:默认显示一个红色背景,点击之后在红色背景上绘制个蓝色小方块。

                                 

                               

                                 

                                 

                                 

实际结果:模拟器正常显示期待的结果。但是真机上点击之后红色背景不见了,只剩一个蓝色小方块,好像绘制之前被清屏了一样。

                                 

                               

                                 

                                 

                                 


希望各位大佬们能给出原因及解决方案,先谢过。

最后一次编辑于  2018-12-22
回答关注问题邀请回答
收藏

1 个回答

  • 淋雨呗
    淋雨呗
    2018-12-23

    今天我也遇到了同样的问题,根据两次渲染存在有时间差的现象,我使用setTimeout 模拟延时调试了下,发现如果不在30ms内绘制完的话,就出现你描述中的问题;(看了下文档没找到具体原因

    解决方案:

        使用离屏方式,例如:

    //多余代码省略,

    var ctx = canvas.getContext('2d')//上屏

    var lip = wx.createCanvas()

        var lipCtx = lip.getContext('2d')

        lipCtx.fillStyle = "#d6bd9f"

        lipCtx.font = "18px Arial"

        lipCtx.fillText("胜", 100, 200)

        setTimeout(function(){

          lipCtx.fillStyle = "#d6bd9f"

          lipCtx.font = "18px Arial"

          lipCtx.fillText("胜",200, 200)

          ctx.drawImage(lip, 0, 0)

        }, 1000)


    2018-12-23
    赞同 1
    回复 1
    • StoneHui
      StoneHui
      2018-12-24

      多谢啦,使用离屏Canvas作为中间层解决了。只是还是不知道异常的原因。

      2018-12-24
      回复