UniApp 中的 Canvas绘制图片

在 UniApp 中使用 Canvas 绘制图片需要以下步骤：

1. 在 template 中添加 canvas 元素，并设置宽高和 ID

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;" />

2. 在 script 中获取 canvas 对象

onReady: function () {
  const ctx = uni.createCanvasContext('myCanvas', this);
  // ...
}

3. 加载图片

const imgSrc = '/static/my-image.png';
uni.getImageInfo({
  src: imgSrc,
  success: function (res) {
    const img = res.path;
    // ...
  }
});

4. 绘制图片

ctx.drawImage(img, x, y, width, height);

其中，img 表示图片对象，x 和 y 表示绘制位置的坐标，width 和 height 表示绘制图片的宽度和高度。

5. 渲染 canvas

最后，调用 `ctx.draw()` 方法渲染 canvas。

ctx.draw();

完整的示例代码如下：

<template>
  <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;" />
</template>

<script>
export default {
  onReady: function () {
    const ctx = uni.createCanvasContext('myCanvas', this);
    const imgSrc = '/static/my-image.png';
    uni.getImageInfo({
      src: imgSrc,
      success: function (res) {
        const img = res.path;
        ctx.drawImage(img, 0, 0, 100, 100);
        ctx.draw();
      }
    });
  }
};
</script>

注意，需要将图片路径设置为相对路径才能正确加载图片。