HTML和JS是我們日常web編程最為常用的兩種語言，它們的強大使我們可以實現不同風格的網頁，其中特效也是必不可少的一種要素。而今天我們為大家帶來的是一個非常酷炫的煙花特效的代碼實現。
<html>
<head>
<title>煙花特效</title>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var particles = [];
var particleCount = 30;
function Particle() {
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.color = "white";
this.radius = Math.random() * 20 + 5;
this.direction = {
x: Math.random() * 20 - 10,
y: Math.random() * 20 - 10
};
this.speed = Math.random() * 2 + 1;
this.gravity = 0.05;
this.opacity = Math.random() * 0.5 + 0.5;
this.shrink = 0.95;
}
Particle.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.opacity;
ctx.fill();
ctx.closePath();
};
Particle.prototype.update = function() {
this.x += this.direction.x * this.speed;
this.y += this.direction.y * this.speed;
this.speed += this.gravity;
this.opacity -= 0.01;
this.radius *= this.shrink;
};
function createParticles() {
for (var i = 0; i< particleCount; i++) {
var particle = new Particle();
particles.push(particle);
}
}
createParticles();
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i< particles.length; i++) {
particles[i].draw();
particles[i].update();
}
if (particles.length< particleCount) {
createParticles();
}
}
setInterval(loop, 30);
</script>
</body>
</html>代碼中使用了HTML5中的canvas標簽，和js的定時器和函數來實現煙花特效。我們定義一個Particle類作為煙花的粒子，其中包含了粒子的位置、大小、速度等信息，并且可以實現其動態的繪制與更新。而createParticles方法則是用來初始化將要顯示的粒子數，loop方法則是用來執行動畫，并不停的清除畫布，更新和繪制每個粒子，保證煙花效果的連續性。在頁面中加入canvas標簽，并且調用方法就可以看到這個非常美麗的煙花特效了！
上一篇ext創建json數組
下一篇ext發送json