用画布和javascript设置时间后改变图纸的颜色值

问题描述：

我已经尝试创建一个简单的音频可视化器，用于使用画布绘制/使用Web音频与音频轨道同步动画API。用画布和javascript设置时间后改变图纸的颜色值

是我到目前为止已经完成： what i've done so far

我想现在要做的主要是改变圆圈的颜色在一定的时间（例如，在轨道的不同部分 - 下降等）。我会如何去做这件事？ 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(); 
}

另外还要添加的东西 - 代码中的位置是设置圆圈的移动/路径吗？正如他们从画布的顶部到底部一样。想知道我是否可以改变这一点。

答

问题1

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

注1：定义颜色中的阿尔法，您不再需要设置ctx.globalAlpha。

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

正如您所说，您可以使用setTimeout在某个时间点更改色相变量。或者，您可以使用freqByteData中的数据连续更改色调变量。有关HSL颜色

问题2

要更新这条线每圈的y坐标： circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1;

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

您是否解决了您的问题@TonyP？ –

用画布和javascript设置时间后改变图纸的颜色值

问题1

问题2

相关推荐