uniapp图片涂鸦

在Uniapp中实现图片涂鸦可以使用canvas来绘制，以下是一个简单的示例代码：

<template>
  <view>
    <canvas
      canvas-id="myCanvas"
      style="width: 100%; height: 300px;"
      @touchstart="touchStart"
      @touchmove="touchMove"
    ></canvas>
  </view>
</template>

<script>
export default {
  methods: {
    touchStart(e) {
      const context = uni.createContext('myCanvas', this);
      context.setStrokeStyle('red');
      context.setLineWidth(5);
      context.setLineCap('round');
      context.beginPath();
      context.moveTo(e.mp.touches[0].x, e.mp.touches[0].y);
      context.stroke();
      context.draw();
    },
    touchMove(e) {
      const context = uni.createContext('myCanvas', this);
      context.lineTo(e.mp.touches[0].x, e.mp.touches[0].y);
      context.stroke();
      context.draw(true);
    },
  },
};
</script>

上面的示例代码创建了一个canvas画布，通过`touchStart`和`touchMove`方法来实现涂鸦功能。在`touchStart`方法中，获取到手指触摸的起始坐标，并使用`createContext`方法创建绘图上下文。设置绘图的样式，如线条颜色、线条宽度和线条末端样式，然后开始绘制路径，并绘制到canvas画布上。

在`touchMove`方法中，获取手指移动的坐标，并使用`lineTo`方法绘制路径，然后再次绘制到canvas画布上。`draw(true)`方法可以实现实时绘制，让涂鸦效果更加流畅。

请注意，在使用canvas绘制时，需要将`canvas-id`属性设置为一个唯一的值，用于标识不同的canvas画布。同时，涂鸦的效果会受到设备性能的影响，较低性能的设备可能会出现卡顿或绘制延迟的情况。

希望这个示例对你有帮助！如果有任何问题，请随时提问。