微信小程序绘制canvas时在不同 设备上的大小不同的问题

在不同的机型上显示相同大小的 Canvas，需要考虑到设备像素比（device pixel ratio）的影响。在高清屏幕上，为了保持图像的清晰度，一个 CSS 像素可能对应多个物理像素，而不同的设备像素比会导致不同的物理像素数量。

因此，我们需要根据当前设备的像素比来动态设置 Canvas 的大小。具体来说，可以使用 wx.getSystemInfoSync() 方法获取当前设备的信息，然后根据设备像素比乘以实际大小来计算 Canvas 的宽高。

下面是一个示例代码：

const query = wx.createSelectorQuery();
query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
  const canvas = res[0].node;
  const ctx = canvas.getContext('2d');
  // 获取设备像素比
  const dpr = wx.getSystemInfoSync().pixelRatio;
  // 设置 Canvas 的实际大小和绘制区域大小
  const width = res[0].width * dpr;
  const height = res[0].height * dpr;
  canvas.width = width;
  canvas.height = height;
  ctx.scale(dpr, dpr);
  // 在这里开始绘制你的图形
  // ...
});

在这个示例中，我们首先使用 wx.createSelectorQuery() 获取 Canvas 节点的信息，然后根据节点的实际大小和设备像素比计算出 Canvas 的实际大小，并将它赋值给 canvas.width 和 canvas.height。接下来，我们还需要通过 ctx.scale() 方法将绘制区域缩放到设备像素比的尺寸。

如果切换页面后绘制canvas图片大小还是会变，可以在绘制图片宽高上乘以设备的像素比，这样不同设备乘以不同的像素比，在页面中绘制图片大小就会相同了。