HTML5烟花喷泉
html代码
<!doctypehtml><html><head><metacharset="utf-8"><title>HTML5 Canvas烟花喷泉动画特效</title><scriptsrc="js/jquery-1.8.3.min.js"></script><style>*{padding:0;margin:0;}html,body{position:relative;width:100%;height:100%;}body{background:#eee;}canvas{background:black;display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}</style></head><body><canvasid="c"></canvas><script>;(function(main){main();})(function(){'use strict';var c = document.getElementById('c');var ctx = c.getContext('2d');varW= c.width = window.innerWidth;varH= c.height = window.innerHeight;varCX=W/2;varCY=H/2;varParticle=function(x, y, vx, vy){this.x = x;this.y = y;this.ox = x;this.oy = y;this.vx = vx;this.vy = vy;this.alpha = Math.random();this.color =25;this.lineWidth = Math.random()*4;};Particle.prototype ={
constructor: Particle,update:function(){this.vx += Math.random()*0.5-0.25;this.vy +=0.8;this.vy *=0.98;this.alpha *=0.95;this.ox =this.x;this.oy =this.y;this.x +=this.vx;this.y +=this.vy;if(this.y <0||this.y >H||this.alpha <0.1){this.vx = Math.random()*2-1;this.vy = Math.random()*-50;this.ox =this.x =CX;this.oy =this.y =H;this.alpha = Math.random();}},render:function(ctx){
ctx.save();
ctx.globalAlpha =0.98;
ctx.lineWidth =this.lineWidth;
ctx.strokeStyle ='hsla('+(this.color)+', 100%, 50%, '+this.alpha +')';
ctx.beginPath();
ctx.moveTo(this.ox,this.oy);
ctx.lineTo(this.x,this.y);
ctx.stroke();
ctx.restore();}};var particleCount =500;var particle =null;var particles =[];var interval =0;for(var i =0; i <250; i++){
particle =newParticle(CX,H,
Math.random()*2-1,
Math.random()*-50);
particles.push(particle);}requestAnimationFrame(functionloop(){requestAnimationFrame(loop);
ctx.globalCompositeOperation ='source-over';
ctx.fillStyle ='rgba(0, 0, 0, 0.1)';
ctx.fillRect(0,0,W,H);
ctx.globalCompositeOperation ='lighter';if(particles.length < particleCount){
particle =newParticle(CX,H,
Math.random()*2-1,
Math.random()*-50);
particles.push(particle);}for(var i =0, len = particles.length; i < len; i++){
particle = particles[i];
particle.update();
particle.render(ctx);}});});</script></body></html>
jquery-1.8.3.min.js代码
自行百度下载
本文转载自: https://blog.csdn.net/u013343616/article/details/122233650
版权归原作者 A雄 所有， 如有侵权，请联系我们删除。
版权归原作者 A雄 所有， 如有侵权，请联系我们删除。