html5canvas实现蓝色的广场粒子喷泉动画特效源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

html5

4 浏览量 2022-11-03 23:34:42 上传评论收藏 1KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5 canvas实现蓝色的广场粒子喷泉动画特效源码.zip （1个子文件）

132689835879079522

index.html 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 canvas蓝色的广场粒子喷泉动画</title> <style> html, body { margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <canvas id="canvas"></canvas> <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> </body> </html>

评论收藏

内容反馈

版权申诉