今天我也遇到了同样的问题,根据两次渲染存在有时间差的现象,我使用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)
小游戏 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-23