HTML 愛心粒子特效代碼 HTML 是網頁開發中重要的語言之一，它可以讓我們輕松構建出美觀的網頁。在網頁制作中，特效也是不可缺少的一部分。如果你想給你的網頁增加些許浪漫，那么不妨嘗試一下 HTML 愛心粒子特效。 在 HTML 中，我們可以使用 canvas 標簽和 JavaScript 編寫出粒子特效。下面的代碼將幫助你實現一個美麗的愛心粒子特效：

<canvas id="canvas"></canvas>
<script>
// 在頁面加載時初始化畫布
window.onload = function() {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
// 畫布長寬
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
// 粒子數量
particles = [],
// 粒子運動時的速度
speed = 10;
// 生成隨機數的函數
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 粒子的構造函數
function Particle() {
// 初始位置
this.x = random(0, w);
this.y = random(0, h);
// 速度
this.vx = random(-speed, speed);
this.vy = random(-speed, speed);
// 尺寸
this.r = random(2, 8);
// 顏色
this.color = "#" + ((Math.random() * 0x1000000<< 0).toString(16));
}
// 粒子繪制
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
};
// 粒子更新
Particle.prototype.update = function() {
// 邊緣檢測
if (this.x< 0 || this.x >w) {
this.vx = -this.vx;
}
if (this.y< 0 || this.y >h) {
this.vy = -this.vy;
}
// 粒子速度和位置更新
this.x += this.vx;
this.y += this.vy;
};
// 幀循環
function loop() {
// 清空畫布
ctx.clearRect(0, 0, w, h);
// 生成粒子
for (var i = 0; i< 50; i++) {
particles.push(new Particle());
}
// 繪制和更新粒子
particles.forEach(function(p) {
p.draw();
p.update();
});
// 循環調用 loop() 實現粒子的持續運動
requestAnimationFrame(loop);
}
loop();
};
</script>

這段代碼使用了 canvas 標簽和 JavaScript 編寫了粒子特效。通過 Particle 構造函數生成粒子對象，并使用循環來實現粒子的持續生成和運動。以及使用了 window.requestAnimationFrame() 方法來實現粒子的動態效果。希望以上代碼能夠幫助到需要實現類似愛心粒子特效的網頁設計師，也希望大家能夠在實現中提高自己的編程能力。