H5，公园瀑布实现

最新推荐文章于 2024-08-06 09:16:49 发布

公有云私有云

最新推荐文章于 2024-08-06 09:16:49 发布

阅读量255

点赞数

本文介绍了一个使用HTML5 Canvas和jQuery实现的粒子效果动画案例。该案例通过创建多个粒子对象，并不断更新粒子的位置和速度来模拟粒子下落的效果。每个粒子都有随机的颜色、大小和初始速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
html,body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="jquery-1.11.3.js"></script>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas'),
c = canvas.getContext("2d"),
particles = {},
particleIndex = 0,
particleNum = 50,
gravity = 0.7;

// full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// particle
function Particle() {

this.posX = canvas.width / 2; // position X
this.posY = canvas.height / 8; // position Y
this.vx = Math.random() * 10 - 5; // velocity X
this.vy = Math.random() * 10 - 5; // velocity Y
this.width = 1; // particle width
this.height = Math.random() * 6 - 3; // particle height

particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;

this.life = 0;
this.death = 140;

//random color
this.colors = [
"rgba(100, 100, 100," + (Math.random() + .5) + ")",
"rgba(52, 152, 200," + (Math.random() + .5) + ")",
"rgba(41, 128, 250," + (Math.random() + .5) + ")"
];
this.color = this.colors[Math.floor(Math.random() * 3)];
}

// draw
Particle.prototype.draw = function() {
this.posX += this.vx;
this.posY += this.vy;

this.life++;

if (this.life >= this.death) {
delete particles[this.id];
}

if (this.posY > (canvas.height - 5)) {
this.vx *= 0.8;
this.vy *= -0.5;
this.posY = (canvas.height - 5);
}

this.vy += gravity;

c.fillStyle = this.color;
c.fillRect(this.posX, this.posY, this.width, this.height);
}

setInterval(function() {
c.fillStyle = "rgba(0,0,0,0.4)";
c.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particleNum; i++) {
new Particle();
}

for (var i in particles) {
particles[i].draw();
}
}, 30);
</script>
</html>