Taro 中使用 Canvas 画图真机有锯齿。还有微信小程序那边的解决方案在Taro中行不通

[余超1992]

说一下背景，在 canvas 中 drawImage 多张图片，然后动态改变某一张图片的颜色。通过canvasGetImageData获得某一块区域的色值，再使用canvasPutImageData将改变的色值重新绘制到canvas上。重绘的时候图像就出现了边缘锯齿化

微信小程序解决方案：https://developers.weixin.qq.com/community/develop/doc/0006208d17ca8015c07a200a651c00?highLine=canvas%20%E6%A8%A1%E7%B3%8A。 目的是对canvas实例进行缩放

Taro没有这方面的案例，在微信论坛找的。但是在Taro环境，不知道如何获取上述解决方案中的 canvas实例，或者有没有其他处理手段。

const query = Taro.createSelectorQuery();
query
  .select('#canvasId')
  .fields(
    {
       node: true,
       size: true,
       context: true,
    },
    (canvasInfo) => {
      console.log('canvasInfo++++++++', canvasInfo);
    }
   )

然后根据微信文档，在自定义组件中，需要传入绑定this。想了想自定义组件还只能用class定义，func组件根本没有this；
但是使用 .in(this)后，query方法没执行；不写 .in(this)，fields()方法直接返回null，因为自定义组件直接去父组件寻找 canvas元素了。

const query = Taro.createSelectorQuery().in(this);
// 所以这里的this到底是什么。

[余超1992]

@余超1992 使用了 .in(this.$scope) 后，query方法执行了，但 canvasInfo.node 还是 null

[余超1992]

@余超1992 在 Taro 中使用 Canvas 画图真机有锯齿。还有微信小程序那边的解决方案在Taro中行不通 中说：

@余超1992 使用了 .in(this.$scope) 后，query方法执行了，但 canvasInfo.node 还是 null
原来需要type="2d"才行，这么一来获取上下文的形式也变了，canvasIns.getContext('2d')。要重新根据 2d 的文档开发了

<Canvas
 type="2d"
 style="width: 100%; height: 482rpx;"
 canvasId="canvas"
 id="canvas_id"
></Canvas>