写在前面的话

在开发微信小游戏时，如果使用 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，可以尽情玩耍了。