收藏
回答

提供新的canvas2D 接口,是为了解决什么,有什么考虑?

将网络图片绘制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是如何提升渲染性能的?

辛苦解答~~

回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2天前

    你好,canvas 2d 主要是为了提高 canvas 性能,做法是从之前的软件渲染改为了硬件渲染,并且接口尽量对齐了 h5,image 这个接口也是为了对齐 h5 的实现,h5 的 drawImage 接口第一个参数也是 image 对象的。

    2天前
    赞同
    回复
登录 后发表内容
问题标签