web前端项目-七彩夜空烟花【附源码】-编程知识

web前端项目-七彩动态夜空烟花【附源码】

本项目仅使用了HTML，代码简单，实现效果绚丽，且本项目代码直接运行即可实现，无需图片素材，接下来让我们一起实现一场美丽的烟花秀叭

运行效果：鼠标点击和移动可控制烟花方向，烟花颜色自动变化

`HTML`源码

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Enjoy fireworks</title> <script type="text/javascript" src="http://g.huceo.com/weixin/qw/jquery.min.js"></script><script type="text/javascript">var dataForWeixin = {appId: "gh_ff79a97cd7f3",url: "http://g.huceo.com/weixin/yh/en/",title: "Lonely fireworks shows, if you feel good, please share the wechat！",desc: "Lonely fireworks shows, if you feel good, please share the wechat！"};var onBridgeReady = function(){WeixinJSBridge.on('menu:share:appmessage', function(argv){var infos = $("#infos").text();     WeixinJSBridge.invoke('sendAppMessage', {"appid": dataForWeixin.appId,"img_url": dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_hy_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc });setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500); });WeixinJSBridge.on('menu:share:timeline', function(argv){var infos = $("#infos").text();             WeixinJSBridge.invoke('shareTimeline', {"appid": dataForWeixin.appId,"img_url":dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_pyq_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc});setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500);  });};if(document.addEventListener){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if(document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}   </script>
<style>
body {background: #000;margin: 0;
}canvas {cursor: crosshair;display: block;
}
.STYLE1 {color: #333333}
</style>
</head>
<div style="text-align:center;clear:both"></div>
<canvas id="canvas"><span class="STYLE1">Open IE effect more perfect </span></canvas>
<script>
window.requestAnimFrame = ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};
})();
var canvas = document.getElementById( 'canvas' ),ctx = canvas.getContext( '2d' ),cw = window.innerWidth,ch = window.innerHeight,fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;
canvas.width = cw;
canvas.height = ch;
function random( min, max ) {return Math.random() * ( max - min ) + min;
}
function calculateDistance( p1x, p1y, p2x, p2y ) {var xDistance = p1x - p2x,yDistance = p1y - p2y;return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}function Firework( sx, sy, tx, ty ) {this.x = sx;this.y = sy;this.sx = sx;this.sy = sy;this.tx = tx;this.ty = ty;this.distanceToTarget = calculateDistance( sx, sy, tx, ty );this.distanceTraveled = 0;this.coordinates = [];this.coordinateCount = 3;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = Math.atan2( ty - sy, tx - sx );this.speed = 2;this.acceleration = 1.05;this.brightness = random( 50, 70 );this.targetRadius = 1;
}
Firework.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );if( this.targetRadius < 8 ) {this.targetRadius += 0.3;} else {this.targetRadius = 1;}this.speed *= this.acceleration;var vx = Math.cos( this.angle ) * this.speed,vy = Math.sin( this.angle ) * this.speed;this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );if( this.distanceTraveled >= this.distanceToTarget ) {createParticles( this.tx, this.ty );fireworks.splice( index, 1 );} else {this.x += vx;this.y += vy;}
}Firework.prototype.draw = function() {ctx.beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';ctx.stroke();ctx.beginPath();ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );ctx.stroke();
}function Particle( x, y ) {this.x = x;this.y = y;this.coordinates = [];this.coordinateCount = 5;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = random( 0, Math.PI * 2 );this.speed = random( 1, 10 );this.friction = 0.95;this.gravity = 1;this.hue = random( hue - 20, hue + 20 );this.brightness = random( 50, 80 );this.alpha = 1;this.decay = random( 0.015, 0.03 );
}Particle.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );this.speed *= this.friction;this.x += Math.cos( this.angle ) * this.speed;this.y += Math.sin( this.angle ) * this.speed + this.gravity;this.alpha -= this.decay;if( this.alpha <= this.decay ) {particles.splice( index, 1 );}
}Particle.prototype.draw = function() {ctx. beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';ctx.stroke();
}function createParticles( x, y ) {var particleCount = 30;while( particleCount-- ) {particles.push( new Particle( x, y ) );}
}
function loop() {requestAnimFrame( loop );hue += 0.5;ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect( 0, 0, cw, ch );ctx.globalCompositeOperation = 'lighter';var i = fireworks.length;while( i-- ) {fireworks[ i ].draw();fireworks[ i ].update( i );}var i = particles.length;while( i-- ) {particles[ i ].draw();particles[ i ].update( i );}if( timerTick >= timerTotal ) {if( !mousedown ) {fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );timerTick = 0;}} else {timerTick++;}if( limiterTick >= limiterTotal ) {if( mousedown ) {fireworks.push( new Firework( cw / 2, ch, mx, my ) );limiterTick = 0;}} else {limiterTick++;}
}canvas.addEventListener( 'mousemove', function( e ) {mx = e.pageX - canvas.offsetLeft;my = e.pageY - canvas.offsetTop;
});canvas.addEventListener( 'mousedown', function( e ) {e.preventDefault();mousedown = true;
});canvas.addEventListener( 'mouseup', function( e ) {e.preventDefault();mousedown = false;
});window.onload = loop;
</script>
<audio autoplay="autoplay">
<source src="http://www.sypeiyin.cn/Uploads/zh/News/2012071516257FJR.mp3" type="audio/mpeg">
</audio>