HTML炫彩粒子是一個很棒的特效，它可以在網頁中創建漂亮的粒子效果。現在，我們來看看如何添加這個特效到你的網站中。我們需要用到以下幾段HTML代碼：
這里是你的網頁內容。
<canvas id="canvas"></canvas>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particles = [];
var particleCount = 100;
var colors = ["#FF6B6B", "#E83E8C", "#8B5FBF", "#4751A9", "#28B5B5", "#70D6FF"];
for (var i=0; i<particleCount; i++) {
particles.push(new Particle());
}
function Particle() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.color = colors[Math.floor(Math.random()*colors.length)];
}
function drawParticles() {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i=0; i<particles.length; i++) {
ctx.beginPath();
ctx.fillStyle = particles[i].color;
ctx.arc(particles[i].x, particles[i].y, 2, 0, Math.PI*2);
ctx.fill();
particles[i].x += particles[i].vx;
particles[i].y += particles[i].vy;
if (particles[i].x>canvas.width) particles[i].x = 0;
if (particles[i].x<0) particles[i].x = canvas.width;
if (particles[i].y>canvas.height) particles[i].y = 0;
if (particles[i].y<0) particles[i].y = canvas.height;
}
}
setInterval(drawParticles, 30);
}
draw();
</script>在上述代碼中，我們首先添加了一個標簽，作為你的網頁的內容。接下來，我們添加了一個