使用HTML5 canvas + Web音频API的音频可视化器需要帮助

Question

我正在使用画布和Web音频API制作一个简单的音频可视化程序。 我在网上找到了这个示例，并想深入了解代码的每个部分到底在做什么。 我对一些事情有所了解。

同样重要的是，我也希望更改画布的背景颜色，但尚未成功。

var analyser, canvas, ctx, random = Math.random, circles = [];

window.onload = function() {
    canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    ctx = canvas.getContext('2d');

    setupWebAudio();

    for (var i = 0; i < 280; i++) {
        circles[i] = new Circle();
        circles[i].draw();
    }
    draw();
};

function setupWebAudio() {
    var audio = document.createElement('audio');
    audio.src = 'flume.mp3';
    document.body.appendChild(audio);

    var audioContext = new AudioContext();
    analyser = audioContext.createAnalyser();
    var source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    audio.play();
}

function draw() {
    requestAnimationFrame(draw);
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 1; i < circles.length; i++) {
        circles[i].radius = freqByteData[i] * 1;
        circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1;
        circles[i].draw();
    }
}

function getRandomColor(){
    return random() * 1 >> 0;
}

function Circle() {
    this.x = random() * canvas.width;
    this.y = random() * canvas.height;
    this.radius = random() * 20 + 20;
    this.color = 'rgb(' + getRandomColor() + ',' + getRandomColor() + ',' + 
    getRandomColor() + ')';    
}

Circle.prototype.draw = function() {
    var that = this;
    ctx.save();
    ctx.beginPath();
    ctx.globalAlpha = random() / 8 + 0.2;
    ctx.arc(that.x, that.y, that.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
}

Answer 1

更改draw（）函数的颜色。

这条线创建一个矩形作为背景。

ctx.clearRect(0, 0, canvas.width, canvas.height);

在此之前，设置颜色，例如：

ctx.fillStyle = rgb(1, 2, 3);
ctx.clearRect(0, 0, canvas.width, canvas.height);