直接把代码贴上来说吧:
//先绘制一个红色方块
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端正常。
测试手机的信息:
这里主要是因为Android GPU双缓冲的原因,2D接口只画一次的话,第二次画的会清屏。requestAnimation 中每次都画是不会有问题的,离屏来画也不会有问题。如果有类似需求,建议离屏来画
逛了一圈论坛,发现这是个老问题了:安卓端的canvas2d, 在异步重绘时总是会清屏一次。好几个帖子都在说这个:
https://developers.weixin.qq.com/community/develop/doc/0000e0aa440d004763b84aa565bc00?highLine=drawImage, 这个兄弟说先画一个方块,再调用image.onload()函数加载一个image,会导致之前的方块被清除,我也遇到了。
https://developers.weixin.qq.com/community/develop/doc/000a4c8814c1905d41096111a56c00?highLine=canvas 这个兄弟调的是setInterval函数,依然是每次新绘制时会清除之前的图像。
https://developers.weixin.qq.com/community/develop/doc/000e4c56260230e98d482e19956400?highLine=canvas
最早的帖子是3月份的,到现在还不解决??什么效率啊。