当前位置：首页 > JavaScript

js实现信号波图

2026-01-31 01:27:34JavaScript

以下是使用JavaScript实现信号波图的几种常见方法，包括Canvas绘图和第三方库方案：

使用Canvas绘制正弦波

通过HTML5 Canvas API动态绘制波形，适合基础需求：

const canvas = document.getElementById('waveCanvas');
const ctx = canvas.getContext('2d');
let phase = 0;

function drawSineWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  for (let x = 0; x < canvas.width; x++) {
    const y = canvas.height/2 + Math.sin(x * 0.05 + phase) * 50;
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = '#3498db';
  ctx.lineWidth = 2;
  ctx.stroke();
  phase += 0.1;
  requestAnimationFrame(drawSineWave);
}

drawSineWave();

使用Chart.js库

快速生成专业级波形图表：

import Chart from 'chart.js/auto';

const ctx = document.getElementById('waveChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: Array.from({length: 100}, (_, i) => i),
    datasets: [{
      label: 'Signal Wave',
      data: Array.from({length: 100}, (_, i) => Math.sin(i * 0.2) * 5),
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

使用D3.js实现动态波形

适合需要高度自定义的场景：

import * as d3 from 'd3';

const svg = d3.select("#waveContainer").append("svg");
const width = 800, height = 200;
const data = d3.range(100).map(i => Math.sin(i * 0.2) * 50 + height/2);

const line = d3.line()
  .x((d, i) => i * 8)
  .y(d => d);

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("stroke", "steelblue")
  .attr("fill", "none");

实时音频波形可视化

结合Web Audio API实现音频波形：

js实现信号波图

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
    visualize();
  });

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    analyser.getByteTimeDomainData(dataArray);
    // 使用Canvas绘制dataArray数据
    requestAnimationFrame(draw);
  }
  draw();
}