微信小程序canvas组件 画柱状光谱图，采用380nm到400nm的波长作为横坐标，

将每个波长对应的光谱值作为纵坐标，绘制出柱状光谱图。

代码示例：

1. 在wxml文件中添加canvas组件：

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

2. 在js文件中获取canvas对象，并设置画布属性：

const ctx = wx.createCanvasContext('spectrum')

const width = wx.getSystemInfoSync().windowWidth // 获取屏幕宽度，用于计算单个柱子的宽度
const height = 300 // 画布高度
const columnWidth = width / 21 // 每个柱子的宽度
const columnGap = columnWidth / 4 // 每个柱子之间的间隔

ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, width, height)

3. 定义一个函数，用于获取每个波长对应的光谱值：

function getSpectrumValue(wavelength) {
  // 根据波长计算光谱值
  // ...
  return spectrumValue
}

4. 循环遍历所有波长，绘制柱状光谱图：

for (let i = 380; i <= 400; i++) {
  const spectrumValue = getSpectrumValue(i) // 获取光谱值

  const x = (i - 380) * columnWidth + columnGap // 计算柱子的横坐标
  const y = spectrumValue * height // 计算柱子的纵坐标
  const columnHeight = height - y // 计算柱子的高度

  ctx.setFillStyle(`rgb(${i - 380}, 0, ${255 - (i - 380) * 2})`)
  ctx.fillRect(x, y, columnWidth - columnGap, columnHeight)
}

ctx.draw()

5. 最终效果如下图所示：