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

// 第一次创建 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)

})

逻辑很简单吧。

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

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

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

1 回复

pkong1 楼5 年前

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