HTML5 Canvas实现放烟花特效

HTML5 herman 8327浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

快过年了,放烟花这一中国传统习俗,又将华丽丽的展示在全世界人们的面前。我们都知道,放烟花虽然好看,但环境污染很严重。而且还容易产生火灾,爆炸等安全事故。为此,今天我就为大家带来了一款,免费而又安全环保的HTML5 Canvas实现的放烟花特效。

效果如下:

代码如下:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Canvas 实现放烟花特效</title>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style type="text/css">
		html,body{height:100%;margin:0;padding:0}
		ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
		img{border:0}
		body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
		canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
		#header img{width:100%; height:20%;}
		#bg img{width:100%; height:80%;}
		#header,#bg{position:fixed;left:0;right:0;z-index:10}
		#header{top:0}
		#bg{position:fixed;z-index:1;bottom:0}
		audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
	</style>
  </head>
  <body>
	<div id="bg">
		<img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">
	</div>
	<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script>
		$(function(){
			var Fireworks = function(){
				var self = this;
				// 产生烟花随机数
				var rand = function(rMi, rMa){
					//按位取反运算符
					return ~~((Math.random()*(rMa-rMi+1))+rMi);
				},hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){
					return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
				};
				//请求动画帧
				window.requestAnimFrame=function(){
					return window.requestAnimationFrame
						||window.webkitRequestAnimationFrame
						||window.mozRequestAnimationFrame
						||window.oRequestAnimationFrame
						||window.msRequestAnimationFrame
						||function(callback){
							window.setTimeout(callback,1000/60);
						}
				}();
				self.init = function(){	
					self.canvas = document.createElement('canvas');		
					//canvas 全屏
					self.canvas.width = self.cw = $(window).innerWidth();
					self.canvas.height = self.ch = $(window).innerHeight();		
					self.particles = [];	
					self.partCount = 150;
					self.fireworks = [];	
					self.mx = self.cw/2;
					self.my = self.ch/2;
					self.currentHue = 30;
					self.partSpeed = 5;
					self.partSpeedVariance = 10;
					self.partWind = 50;
					self.partFriction = 5;
					self.partGravity = 1;
					self.hueMin = 0;
					self.hueMax = 360;
					self.fworkSpeed = 4;
					self.fworkAccel = 10;
					self.hueVariance = 30;
					self.flickerDensity = 25;
					self.showShockwave = true;
					self.showTarget = false;
					self.clearAlpha = 25;
					$(document.body).append(self.canvas);
					self.ctx = self.canvas.getContext('2d');
					self.ctx.lineCap = 'round';
					self.ctx.lineJoin = 'round';
					self.lineWidth = 1;
					self.bindEvents();			
					self.canvasLoop();
					self.canvas.onselectstart = function() {
						return false;
					};
				};		
				// 创建粒子
				self.createParticles = function(x,y, hue){
					var countdown = self.partCount;
					while(countdown--){
						var newParticle = {
							x: x,
							y: y,
							coordLast: [
								{x: x, y: y},
								{x: x, y: y},
								{x: x, y: y}
							],
							angle: rand(0, 360),
							speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
							friction: 1 - self.partFriction/100,
							gravity: self.partGravity/2,
							hue: rand(hue-self.hueVariance, hue+self.hueVariance),
							brightness: rand(50, 80),
							alpha: rand(40,100)/100,
							decay: rand(10, 50)/1000,
							wind: (rand(0, self.partWind) - (self.partWind/2))/25,
							lineWidth: self.lineWidth
						};				
						self.particles.push(newParticle);
					}
				};
				// 更新粒子
				self.updateParticles = function(){
					var i = self.particles.length;
					while(i--){
						var p = self.particles[i];
						var radians = p.angle * Math.PI / 180;
						var vx = Math.cos(radians) * p.speed;
						var vy = Math.sin(radians) * p.speed;
						p.speed *= p.friction;
						p.coordLast[2].x = p.coordLast[1].x;
						p.coordLast[2].y = p.coordLast[1].y;
						p.coordLast[1].x = p.coordLast[0].x;
						p.coordLast[1].y = p.coordLast[0].y;
						p.coordLast[0].x = p.x;
						p.coordLast[0].y = p.y;
						p.x += vx;
						p.y += vy;
						p.y += p.gravity;
						p.angle += p.wind;				
						p.alpha -= p.decay;
						if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){					
							self.particles.splice(i, 1);	
						}
					};
				};
				// 绘制粒子
				self.drawParticles = function(){
					var i = self.particles.length;
					while(i--){
						var p = self.particles[i];							
						var coordRand = (rand(1,3)-1);
						self.ctx.beginPath();								
						self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
						self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
						self.ctx.closePath();				
						self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
						self.ctx.stroke();				
						if(self.flickerDensity > 0){
							var inverseDensity = 50 - self.flickerDensity;					
							if(rand(0, inverseDensity) === inverseDensity){
								self.ctx.beginPath();
								self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
								self.ctx.closePath();
								var randAlpha = rand(50,100)/100;
								self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
								self.ctx.fill();
							}	
						}
					};
				};
				// 创建烟花				
				self.createFireworks = function(startX, startY, targetX, targetY){
					var newFirework = {
						x: startX,
						y: startY,
						startX: startX,
						startY: startY,
						hitX: false,
						hitY: false,
						coordLast: [
							{x: startX, y: startY},
							{x: startX, y: startY},
							{x: startX, y: startY}
						],
						targetX: targetX,
						targetY: targetY,
						speed: self.fworkSpeed,
						angle: Math.atan2(targetY - startY, targetX - startX),
						shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
						acceleration: self.fworkAccel/100,
						hue: self.currentHue,
						brightness: rand(50, 80),
						alpha: rand(50,100)/100,
						lineWidth: self.lineWidth
					};			
					self.fireworks.push(newFirework);
				};
				// 更新烟花
				self.updateFireworks = function(){
					var i = self.fireworks.length;
					while(i--){
						var f = self.fireworks[i];
						self.ctx.lineWidth = f.lineWidth;
						vx = Math.cos(f.angle) * f.speed,
						vy = Math.sin(f.angle) * f.speed;
						f.speed *= 1 + f.acceleration;				
						f.coordLast[2].x = f.coordLast[1].x;
						f.coordLast[2].y = f.coordLast[1].y;
						f.coordLast[1].x = f.coordLast[0].x;
						f.coordLast[1].y = f.coordLast[0].y;
						f.coordLast[0].x = f.x;
						f.coordLast[0].y = f.y;
						if(f.startX >= f.targetX){
							if(f.x + vx <= f.targetX){
								f.x = f.targetX;
								f.hitX = true;
							} else {
								f.x += vx;
							}
						} else {
							if(f.x + vx >= f.targetX){
								f.x = f.targetX;
								f.hitX = true;
							} else {
								f.x += vx;
							}
						}
						if(f.startY >= f.targetY){
							if(f.y + vy <= f.targetY){
								f.y = f.targetY;
								f.hitY = true;
							} else {
								f.y += vy;
							}
						} else {
							if(f.y + vy >= f.targetY){
								f.y = f.targetY;
								f.hitY = true;
							} else {
								f.y += vy;
							}
						}				
						if(f.hitX && f.hitY){
							self.createParticles(f.targetX, f.targetY, f.hue);
							self.fireworks.splice(i, 1);
						}
					};
				};
				// 绘制烟花
				self.drawFireworks = function(){
					var i = self.fireworks.length;
					self.ctx.globalCompositeOperation = 'lighter';
					while(i--){
						var f = self.fireworks[i];		
						self.ctx.lineWidth = f.lineWidth;
						var coordRand = (rand(1,3)-1);					
						self.ctx.beginPath();							
						self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
						self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
						self.ctx.closePath();
						self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
						self.ctx.stroke();	
						if(self.showTarget){
							self.ctx.save();
							self.ctx.beginPath();
							self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
							self.ctx.closePath();
							self.ctx.lineWidth = 1;
							self.ctx.stroke();
							self.ctx.restore();
						}
						if(self.showShockwave){
							self.ctx.save();
							self.ctx.translate(Math.round(f.x), Math.round(f.y));
							self.ctx.rotate(f.shockwaveAngle);
							self.ctx.beginPath();
							self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
							self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
							self.ctx.lineWidth = f.lineWidth;
							self.ctx.stroke();
							self.ctx.restore();
						}
					};
				};
				// 绑定事件
				self.bindEvents = function(){
					$(window).on('resize', function(){			
						clearTimeout(self.timeout);
						self.timeout = setTimeout(function() {
							self.canvas.width = self.cw = $(window).innerWidth();
							self.canvas.height = self.ch = $(window).innerHeight();
							self.ctx.lineCap = 'round';
							self.ctx.lineJoin = 'round';
						}, 100);
					});
					$(self.canvas).on('mousedown', function(e){
						self.mx = e.pageX - self.canvas.offsetLeft;
						self.my = e.pageY - self.canvas.offsetTop;
						self.currentHue = rand(self.hueMin, self.hueMax);
						self.createFireworks(self.cw/2, self.ch, self.mx, self.my);	
						$(self.canvas).on('mousemove.fireworks', function(e){
							self.mx = e.pageX - self.canvas.offsetLeft;
							self.my = e.pageY - self.canvas.offsetTop;
							self.currentHue = rand(self.hueMin, self.hueMax);
							self.createFireworks(self.cw/2, self.ch, self.mx, self.my);									
						});				
					});
					$(self.canvas).on('mouseup', function(e){
						$(self.canvas).off('mousemove.fireworks');									
					});
				};
				self.clear = function(){
					self.particles = [];
					self.fireworks = [];
					self.ctx.clearRect(0, 0, self.cw, self.ch);
				};
				self.canvasLoop = function(){
					requestAnimFrame(self.canvasLoop, self.canvas);			
					self.ctx.globalCompositeOperation = 'destination-out';
					self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
					self.ctx.fillRect(0,0,self.cw,self.ch);
					self.updateFireworks();
					self.updateParticles();
					self.drawFireworks();			
					self.drawParticles();
				};
				self.init();		
			}
			var fworks = new Fireworks();
			$('#info-toggle').on('click', function(e){
				$('#info-inner').stop(false, true).slideToggle(100);
				e.preventDefault();
			});	
		});
	</script>
	<canvas width="1400" height="449"></canvas>
  </body>
</html>

是不是被HTML5强大的效果惊呆了!哈哈,我会一如既往的好!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 Canvas实现放烟花特效