HTML5吹泡泡代碼

HTML5不僅僅是網(wǎng)頁標(biāo)準(zhǔn)，也可以用來做一些有趣的事情，比如使用HTML5吹泡泡。

以下是HTML5吹泡泡代碼示例：

//創(chuàng)建畫布和2D上下文對象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//定時器
setInterval(function() {
//清除畫布上的內(nèi)容
ctx.clearRect(0, 0, canvas.width, canvas.height);
//循環(huán)畫出每一個泡泡
for (var i = 0; i< bubbles.length; i++) {
var b = bubbles[i];
//重新計算泡泡上升的位置
b.y -= b.speed;
//當(dāng)泡泡超出畫布范圍時，重新生成泡泡
if (b.y< 0) {
bubbles[i] = new Bubble();
}
//畫出泡泡
ctx.beginPath();
ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = b.color;
ctx.fill();
}
}, 30);
//泡泡構(gòu)造函數(shù)
function Bubble() {
this.x = Math.random() * canvas.width;  //x坐標(biāo)隨機
this.y = canvas.height; //y坐標(biāo)從底部開始
this.radius = Math.random() * 25;  //半徑隨機
this.speed = Math.random() * 5 + 1;  //速度隨機
this.color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"; //顏色隨機
}
//生成20個泡泡
var bubbles = [];
for (var i = 0; i< 20; i++) {
bubbles.push(new Bubble());
}

代碼解析說明：

首先通過創(chuàng)建畫布和2D上下文對象，然后使用定時器不斷循環(huán)生成泡泡，使用canvas繪制泡泡，并且讓每個泡泡上升一定位置，并且當(dāng)泡泡超出畫布范圍時，重新生成泡泡。通過泡泡構(gòu)造函數(shù)，可以生成不同顏色、半徑、速度和位置的泡泡，同時使用了隨機數(shù)函數(shù)以增加泡泡的隨機性。