微信小程序 canvas 绘图一个矩形 取canvas实例后 跟随鼠标移动

在微信小程序中，你可以利用`wx.createContext()`创建一个Canvas实例，并结合`onTouchmove`事件监听用户的触摸移动，动态地绘制跟随鼠标的矩形。以下是实现这个功能的基本步骤：

1. **初始化 Canvas**:
首先，在页面的`view`或者其他合适的组件上，获取到`ref`引用的元素，然后通过`createContext()`创建一个Canvas上下文。

Page({
  ...
  canvasRef: {
    // 创建一个ref
    ref: function (instance) {
      if (instance) {
        this.canvasInstance = instance.getContext('2d');
      }
    },
  },
  ...
})

2. **响应 touchmove 事件**:
在`onLoad`或其他生命周期函数里，添加一个`touchmove`事件处理函数，获取移动的位置，并绘制矩形。

onTouchMove(e) {
  const { touches } = e;
  if (touches.length > 0) {
    const touch = touches[0];
    const x = touch.pageX - this.viewRect.left; // 获取屏幕坐标减去视口偏移
    const y = touch.pageY - this.viewRect.top;

    // 重绘矩形
    this.canvasInstance.clearRect(0, 0, this.canvasInstance.width, this.canvasInstance.height);
    this.canvasInstance.beginPath();
    this.canvasInstance.rect(x, y, 50, 50); // 矩形宽度和高度可以根据需要调整
    this.canvasInstance.fillStyle = 'red'; // 设置填充颜色
    this.canvasInstance.fill();
  }
}

这里假设`viewRect`是一个包含当前视口宽度和高度的对象，你可以根据实际情况计算屏幕坐标。