HTML5是一種全新的標準，能夠?qū)崿F(xiàn)更復(fù)雜的功能和交互體驗。其中制作彩虹雨效果是一個非常常見的應(yīng)用，下面我們就來看一下如何使用HTML5來實現(xiàn)彩虹雨效果的代碼。

varcanvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var drops = [];functionRaindrop(x,y,speed,len,color) {this.x = x;this.y = y;this.speed = speed;this.len = len;this.color = color;
}Raindrop.prototype.draw=function() {
context.beginPath();
context.moveTo(this.x,this.y);
context.lineTo(this.x,this.y +this.len);
context.strokeStyle=this.color;
context.stroke();
};functioncreateRain() {for(vari = 0; i< 10; i++) {
drops.push(newRaindrop(Math.random() * canvas.width, 0, Math.random() * 10 + 5, Math.random() * 20 + 10,"hsl("+(Math.random()*360)+", 100%, 50%)"));
}
}functiondrawRain() {
context.clearRect(0, 0, canvas.width, canvas.height);
drops.forEach(function(drop) {
drop.draw();
drop.y += drop.speed;if(drop.y >canvas.height) {
drop.y = 0;
drop.len= Math.random() * 20 + 10;
drop.speed = Math.random() * 10 + 5;
}
});
setTimeout(drawRain, 30);
}createRain();drawRain();

代碼中我們定義了一個Raindrop對象，每一滴雨是一個Raindrop對象，再用一個數(shù)組存放雨滴。然后在createRain函數(shù)中生成10個不同位置、速度、長度和顏色的雨滴。在drawRain函數(shù)中，先清除畫面，然后對drops數(shù)組中的每一滴雨進行繪制、位置改變和速度變化的處理。最后用setTimeout使得畫面不斷刷新，形成動畫效果。