在设置时间后使用canvas和javascript更改图形的颜色值

Question

我已尝试使用画布为mp3轨道创建简单的音频可视化器，以使用Web音频API与音频轨道同步地绘制/设置圆圈动画。

到目前为止，我所做的是：

我现在基本上想做的是在一定时间范围内更改圆圈的颜色（例如，在轨道的不同部分-下落等）。 我将如何去做呢？ setTimeout ？ 我进行了搜索，但找不到任何内容（而且我对JavaScript还是很陌生）。

这是完整的代码。

// Estabilish all variables tht analyser will use
var analyser, canvas, ctx, random = Math.random, circles = [];


// begins once all the page resources are loaded.
window.onload = function() {
canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d', {alpha: false});

setupWebAudio(); //loads audio track

for (var i = 0; i < 20; i++) { // loop runs 50 times - creating 49 circles
    circles[i] = new Circle();
    circles[i].draw();
}
draw();
};

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

var audioContext = new AudioContext(); // AudioContext object instance (WEB AUDIO API)
//contains an audio signal graph representing connections betweens AudioNodes
analyser = audioContext.createAnalyser(); // Analyser method
var source = audioContext.createMediaElementSource(audio);
// Re-route audio playback into the processing graph of the AudioContext
source.connect(analyser);
analyser.connect(audioContext.destination);
audio.play();
}

function draw() {
requestAnimationFrame(draw);
var freqByteData = new Uint8Array(analyser.frequencyBinCount); //Array of the frequency data from the audio track (representation of the sound frequency)
analyser.getByteFrequencyData(freqByteData); //take the analyser variable run it through the getByteFrequencyData method - passing through the array
ctx.fillStyle = "#ff00ed";
ctx.fillRect(0, 0, canvas.width, canvas.height); //fill the canvas with colour

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 Circle() {
this.x = random() * canvas.width; // creates random placement of circle on canvas
this.y = random() * canvas.height;
this.radius = random() * 20 + 20; //creates random radius of circle 
this.color = 'rgb(6,237,235)'; //colour of circles
}

Circle.prototype.draw = function() { //Drawing path
var that = this;
ctx.save();
ctx.beginPath();
ctx.globalAlpha = 0.75; //Transparency level
ctx.arc(that.x, that.y, that.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}

还要添加的另一件事-代码在哪里设置圆的运动/路径？ 当它们从画布的顶部移到底部时。 想知道我是否可以更改此设置。

Answer 1

问题1

与其将圆形颜色硬编码为this.color = 'rgb(6,237,235)'; ，您可以使用全局变量来保存色相var hue = 0; 然后像这样在您的Circle.draw()使用它： ctx.fillStyle = 'hsla(' + hue + ', 50%, 50%, 0.75)';

注1：通过在颜色中定义Alpha，您不再需要设置ctx.globalAlpha 。

注意2：您不再需要此this.color 。

如您所说，您可以使用setTimeout在特定的时间点更改hue变量。 或者，您可以使用freqByteData的数据连续更改色相变量。

有关hsl颜色的更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#hsl（）_and_hsla（）

问题2

您正在使用此行更新每个圆的y坐标：circle circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1; circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1;

这意味着：如果当前y位置大于画布高度：将新值设置为零，否则增加一。