怎么在微信小程序里创建一个canvas图片,再通过触控移动它

在微信小程序里创建一个canvas图片，可以按照以下步骤：

1. 在wxml文件中创建一个canvas标签，设置宽高和id属性：

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

2. 在js文件中获取canvas元素和绘图上下文：

let canvas = wx.createCanvasContext('myCanvas');

3. 使用绘图上下文的API进行绘制：

canvas.setFillStyle('red');
canvas.fillRect(0, 0, 100, 100);
canvas.draw();

这样就可以在canvas中绘制一个红色的矩形。

如果想通过触控移动canvas图片，可以按照以下步骤：

1. 在canvas上监听touchstart、touchmove、touchend事件：

canvas.addEventListener('touchstart', onTouchStart);
canvas.addEventListener('touchmove', onTouchMove);
canvas.addEventListener('touchend', onTouchEnd);

2. 在事件回调函数中获取触摸点坐标，计算出canvas移动的距离：

let startX, startY;
function onTouchStart(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}

function onTouchMove(e) {
  let moveX = e.touches[0].clientX - startX;
  let moveY = e.touches[0].clientY - startY;
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
  canvas.translate(moveX, moveY);
  canvas.draw();
}

function onTouchEnd(e) {
  // do something
}

3. 使用canvas的translate方法移动canvas的坐标系，再调用draw方法重新绘制canvas即可。

完整代码：

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

// js
let canvas = wx.createCanvasContext('myCanvas');
canvas.setFillStyle('red');
canvas.fillRect(0, 0, 100, 100);
canvas.draw();

let startX, startY;
canvas.addEventListener('touchstart', onTouchStart);
canvas.addEventListener('touchmove', onTouchMove);
canvas.addEventListener('touchend', onTouchEnd);

function onTouchStart(e) {
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
}

function onTouchMove(e) {
  let moveX = e.touches[0].clientX - startX;
  let moveY = e.touches[0].clientY - startY;
  startX = e.touches[0].clientX;
  startY = e.touches[0].clientY;
  canvas.translate(moveX, moveY);
  canvas.draw();
}

function onTouchEnd(e) {
  // do something
}