微信小程序canvas组件 画光谱图

下面是一个简单的微信小程序canvas组件画光谱图的实例：

wxml代码：

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

js代码：

Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('canvas');
    const width = wx.getSystemInfoSync().windowWidth;
    const height = 300;
    const colors = [
      '#ff0000',
      '#ff7f00',
      '#ffff00',
      '#00ff00',
      '#0000ff',
      '#8b00ff',
    ];
    const numBars = colors.length;
    const barWidth = width / numBars;
    const freqByteData = new Uint8Array(numBars);
    const barHeight = freqByteData.length;
    const x = 0;
    const y = height - barHeight;
    const gap = 2;

    function draw() {
      requestAnimationFrame(draw);
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = '#333';
      ctx.fillRect(0, 0, width, height);

      ctx.fillStyle = '#fff';
      ctx.fillRect(x, y, numBars * barWidth + gap * (numBars - 1), barHeight);

      ctx.save();
      ctx.translate(x, y + barHeight);

      for (let i = 0; i < numBars; ++i) {
        const value = freqByteData[i];
        const percent = value / 256;
        const barHeight = height * percent;
        const color = colors[i];

        ctx.fillStyle = color;
        ctx.fillRect(i * (barWidth + gap), -barHeight, barWidth, barHeight);
      }

      ctx.restore();

      wx.getBackgroundAudioManager().getRealtimeFrequencyData(freqByteData);
    }

    draw();
  },
});

这个实例中，我们使用了 `wx.createCanvasContext` 创建了一个画布，获取窗口的宽度和高度，并定义了一些颜色，条形数量等变量。我们还定义了一个 `freqByteData` 数组，用于存储频率数据。

在 `draw` 函数中，我们使用 `requestAnimationFrame` 来循环绘制画布。我们首先清空画布，然后绘制一个白色的矩形作为背景。接着，我们使用 `getBackgroundAudioManager` API 获取音频的实时频率数据，并将其存储在 `freqByteData` 数组中。最后，我们使用循环来绘制每个条形，并根据频率数据和颜色来设置条形的高度和颜色。

在页面加载完成后，我们调用 `draw` 函数来开始绘制画布。