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>
注意： 本项目代码直接运行即可实现，无需图片素材