写在前面的话
在开发微信小游戏时,如果使用
webgl
的绘图方式,在绘制开放域画布sharedCanvas
时,由于开放域只能绘制到上屏canvas
中且主域无法得知开放域状态的限制,通常的做法是将sharedCanvas
转成texImage2D
绘制到上屏canvas
中然后不停的绘制,然而texImage2D
转换是通过CPU提交数据交由GPU进行计算,不停的提交会导致CPU过高,对于经验不足的人来说,性能会很差。
思路
我的做法是反其道而行,上屏 canvas
还是使用 2d
的方式进行绘制,游戏场景则使用离屏 canvas
绘制,这个离屏 canvas
使用 webgl
的方式,然后将这个离屏 canvas
绘制到上屏 canvas
中,canvas 2d
的 drawImage
方法可以直接将一个 canvas
当成图片进行绘制,sharedCanvas
也可以通过 drawImage
方法绘制到上屏 canvas
中去了。
这样可以免去很多复杂的转换,轻松的将开放域画布 sharedCanvas
绘制到上屏 canvas
中去了,还可以绘制游戏中用到的其他的 2d
元素。
小提示:目前这种做法在 Android
中存在BUG,无法正确的绘制,微信小游戏团队正在修复这个问题,目前已经内测通过,下一个 Android
版微信将会修复。
2019年2月20日更新
在 Android
版微信7.0.3客户端中已经修复了无法正确绘制的BUG,可以尽情玩耍了。