HTML煙花效果是一種非常酷炫的網(wǎng)頁特效。使用HTML代碼實現(xiàn)煙花效果的方法有很多，其中一種簡單易懂的實現(xiàn)方式是使用canvas。不過，對于不太熟悉JavaScript的開發(fā)者來說，直接將canvas代碼復(fù)制到自己的網(wǎng)頁中可能比較困難。因此，下面給大家分享一份可直接復(fù)制的HTML煙花代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML煙花效果</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particles = [];
function createParticle() {
var particle = {
x: canvas.width / 2,
y: canvas.height / 2,
xv: Math.random() * 10 - 5,
yv: Math.random() * 10 - 5,
color: "hsl(" + Math.random() * 360 + ", 100%, 50%)",
size: Math.random() * 10
};
particles.push(particle);
}
function updateParticle(particle) {
particle.x += particle.xv;
particle.y += particle.yv;
particle.size *= 0.95;
}
function drawParticle(particle) {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
createParticle();
for (var i = 0; i< particles.length; i++) {
var particle = particles[i];
updateParticle(particle);
drawParticle(particle);
if (particle.size< 1) {
particles.splice(i, 1);
i--;
}
}
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>上述代碼中，我們使用了canvas、JavaScript等技術(shù)，通過創(chuàng)建一個粒子集合的方式實現(xiàn)了HTML煙花效果。使用時，只需將上述代碼復(fù)制到自己的HTML文件中即可，注意修改樣式或者調(diào)整粒子數(shù)量等參數(shù)，以適應(yīng)自己的需求。
上一篇vue怎么清空data
下一篇vue怎么添加dom