微信小程序实现颜色选择器

实现一个颜色选择器的小程序，可以参考以下步骤：

1. 在小程序的 WXML 文件中，创建一个 canvas 组件，并给它一个 ID，用于后面的操作：

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

2. 在小程序的 JavaScript 文件中，获取到 canvas 组件的上下文对象：

const ctx = wx.createCanvasContext('canvas')

3. 绘制一个渐变色的矩形，作为颜色选择器的背景：

const gradient = ctx.createLinearGradient(0, 0, 300, 0)
gradient.addColorStop(0, 'red')
gradient.addColorStop(0.2, 'orange')
gradient.addColorStop(0.4, 'yellow')
gradient.addColorStop(0.6, 'green')
gradient.addColorStop(0.8, 'blue')
gradient.addColorStop(1, 'purple')
ctx.setFillStyle(gradient)
ctx.fillRect(0, 0, 300, 300)

4. 监听 canvas 组件的触摸事件，获取用户选择的颜色：

wx.createSelectorQuery().select('#canvas').boundingClientRect(function(rect){
  const x = event.touches[0].x - rect.left
  const y = event.touches[0].y - rect.top
  const imageData = ctx.getImageData(x, y, 1, 1).data
  const color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`
  console.log(color)
}).exec()

5. 将获取到的颜色值显示在页面上，供用户查看：

<view>您选择的颜色是：{{color}}</view>

完整代码如下：

WXML 文件：

<view class="container">
  <canvas id="canvas" style="width:100%;height:300px;"></canvas>
  <view>您选择的颜色是：{{color}}</view>
</view>

JavaScript 文件：

Page({
  data: {
    color: ''
  },
  onCanvasTouch: function(event) {
    wx.createSelectorQuery().select('#canvas').boundingClientRect(function(rect){
      const x = event.touches[0].x - rect.left
      const y = event.touches[0].y - rect.top
      const ctx = wx.createCanvasContext('canvas')
      const imageData = ctx.getImageData(x, y, 1, 1).data
      const color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`
      this.setData({
        color: color
      })
    }.bind(this)).exec()
  },
  onReady: function() {
    const ctx = wx.createCanvasContext('canvas')
    const gradient = ctx.createLinearGradient(0, 0, 300, 0)
    gradient.addColorStop(0, 'red')
    gradient.addColorStop(0.2, 'orange')
    gradient.addColorStop(0.4, 'yellow')
    gradient.addColorStop(0.6, 'green')
    gradient.addColorStop(0.8, 'blue')
    gradient.addColorStop(1, 'purple')
    ctx.setFillStyle(gradient)
    ctx.fillRect(0, 0, 300, 300)
  }
})