uniapp canvas 对一个像素点编辑，存储数据，添加图标

在Uniapp中，你可以使用Canvas API来编辑像素点，存储数据和添加图标。以下是一个简单的示例代码：

<template>
  <canvas ref="myCanvas" @touchstart="onTouchStart" @touchmove="onTouchMove"></canvas>
</template>

<script>
export default {
  data() {
    return {
      pixelData: [], // 存储像素点数据
      iconImage: null // 图标图片对象
    }
  },
  mounted() {
    // 获取Canvas对象
    const canvas = this.$refs.myCanvas.$el
    const ctx = canvas.getContext('2d')

    // 加载图标图片
    this.iconImage = new Image()
    this.iconImage.src = '/static/icon.png'
    this.iconImage.onload = () => {
      // 绘制图标
      ctx.drawImage(this.iconImage, 0, 0)
    }
  },
  methods: {
    onTouchStart(e) {
      // 获取Canvas对象
      const canvas = this.$refs.myCanvas.$el
      const ctx = canvas.getContext('2d')

      // 获取点击位置坐标
      const x = e.touches[0].clientX - canvas.offsetLeft
      const y = e.touches[0].clientY - canvas.offsetTop

      // 绘制像素点
      ctx.fillStyle = 'red'
      ctx.fillRect(x, y, 1, 1)

      // 存储像素点数据
      this.pixelData.push({ x, y })
    },
    onTouchMove(e) {
      // 获取Canvas对象
      const canvas = this.$refs.myCanvas.$el
      const ctx = canvas.getContext('2d')

      // 获取点击位置坐标
      const x = e.touches[0].clientX - canvas.offsetLeft
      const y = e.touches[0].clientY - canvas.offsetTop

      // 绘制像素点
      ctx.fillStyle = 'red'
      ctx.fillRect(x, y, 1, 1)

      // 存储像素点数据
      this.pixelData.push({ x, y })
    }
  }
}
</script>

在这个示例中，我们使用Canvas API绘制了一个图标，并在Canvas上监听了touchstart和touchmove事件来绘制像素点和存储像素点数据。你可以根据需求修改这个示例代码来实现自己的功能。