将网络图片绘制canvas，目前，根据官方文档中，应该是2种（或及2种以上，欢迎大家补充~~~）

那么新canvas 2D接口尝试

const query = wx.createSelectorQuery().in(this)
query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const img = canvas.createImage()
        img.onload = () => {
          ctx.drawImage(img, 0, 0, 100, 100)
        }
        img.src = 'https://p0.meituan.net/myvideodistribute/0990cc2062e81ab6cc11fd8690f8755042005.jpg'
        // 这种方式获取canvas区域隐含的像素数据
        console.log(ctx.getImageData(0, 0, 150, 100).data)
      })

<canvas type="2d" id="myCanvas" canvas-id="myCanvas"></canvas>

旧版canvas接口写法

const ctx = wx.createCanvasContext('myCanvas')
wx.getImageInfo({
        src: 'https://p0.meituan.net/myvideodistribute/0990cc2062e81ab6cc11fd8690f8755042005.jpg',
        success: function (res) {
          console.log('res', res)
          const poster = res.path                                  
          ctx.drawImage(poster, 0, 0, 150, 100)
          ctx.draw()
        }
      })
      // 这种方式获取canvas区域隐含的像素数据
      wx.canvasGetImageData({
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: 150,
        height: 100,
        success(res) {
          console.log(res.width) // 150
          console.log(res.height) // 100
          console.log(res.data instanceof Uint8ClampedArray) // true
          console.log(res.data) // 150 * 100 * 4
          console.log(res.data.length) // 150 * 100 * 4
        }
      })

<canvas id="myCanvas" canvas-id="myCanvas"></canvas>

虽然两种方法，都能实现将网络图片绘制进canvas。但新版的进行了createImage，将其打印的话，其实就是新建了一个img标签，并将img标签的东西绘制进canvas

同时根据报错可以看出

新版canvas2d 在绘制图片时，类型仅支持标注的这些。

那么问题来了，为什么微信官方会仅支持以上方式进行新版canvas2d 图片的绘制，考虑是什么，解决了什么，且想问问Canvas 2D是如何提升渲染性能的？

辛苦解答~~