微信小程序 drawImage 问题

好久没写了，其实可写的还是挺多，主要还是懒吧...

最近公司项目使用小程序做序列帧动画，大概有 116 张图，共9.6M。

 

比较闲的日子里实验了一番，主要有以下几种方法，

1. css background-image + animation

2. css background-position + animation

3. js background-image

4. js background-position

5. js img src

6. canvas drawImage

结果当然是 canvas 性能最优咯，不会出现掉帧和卡屏的情况，其中最不推荐第一种

 

所以这次项目也就准备尝试下微信小程序的 canvas 会不会有别样的风味

基本上和 html 的 canvas 区别不大，方法名略有不同，再就是需要一个 draw 方法才会绘制。

canvas.getContext('2d') 等于 wx.createCanvasContext(canvas)。

一般 wx.createCanvasContext 放在 onReady 还是 onShow 并没有什么区别（手里机型太少，没试太多）

 

接着就开始了填坑之路：

1. Image 对象问题，只需直接使用图片路径

官方案例给的是 wx.chooseImage 返回的缓存文件，显然不是我们要的；

在 html 中如果想 drawImage 那就需要一个 Image 对象ÿ