操作描述:setInterval里执行fillRect,并且不clearRect,预期出现连续的正方形(连在一起) 代码:
const canvas = wx.createCanvas();
const context = canvas.getContext('2d') // 创建一个 2d context
context.fillStyle = '#1aad19' // 矩形颜色
const rectX = canvas.width / 2 - 50
let rectY = 0
function drawRect(x, y) {
//context.clearRect(x, y - 1, 100, 100)
context.fillRect(x, y, 100, 100)
}
setInterval(function () { drawRect(rectX,rectY++)}, 16);
现象:苹果手机预览时出现连续的正方形(连在一起);安卓手机上预览时,只有一个正方形不断下降
问题:这是因为安卓手机在每一次fillRect时会清掉之前的作图吗?那如果我要画多个图是不是得在每个setInterval里面全都再画一遍?
另:看到有人提问“真机调试时 fillRect绘制的图形 在 drawImage 后 不显示”,我觉得可能是同一原因,小白亟待帮助
这里主要是因为Android GPU双缓冲的原因,2D接口只画一次的话,第二次画的会清屏。requestAnimation 中每次都画是不会有问题的,离屏来画也不会有问题。