新年将至，100行Html+css实现烟花特效陪你跨年（附春节对联）
发布时间：2023-12-17 12:30
加特林版烟花
![\"\"](\"https://img-blog.csdnimg.cn/3b4c784f024d4391abbc08deef09ea7d.gif\")
特点
根据鼠标点击的速度出现烟花，像加特林一样哒哒哒，希望朋友们在2022年能够像加特林一样疯狂输出，打败所有的不甘与平凡，向着自己的梦想努力前进着
html代码
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5鼠标点击页面放烟花特效</title>
<style>
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}
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
var Fireworks = function(){
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var 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(a){window.setTimeout(a,1E3/60)}}();
self.init = function(){
self.canvas = document.createElement('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();
});
</script>
</body>
</html>
漫天飞雨烟花
![\"\"](\"https://img-blog.csdnimg.cn/f8d60aa49bbf4e2b979547d6ba1acc20.gif\")
特点
根据鼠标的速度和点击会绽放出烟花，为何叫漫天飞雨呢，因为这个特效特别像“霞”的R技能，希望朋友们在这个不平凡的一年能够躲避所有不好的事情，也能够克服各种困难，像霞一样释放大招，征服生活，漫天飞雨。
HTML代码
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>带交互功能的HTML5+JS烟花特效</title>
<style>
/* basic styles for black background and crosshair cursor */
body {
background: #000;
margin: 0;
}
canvas {
cursor: crosshair;
display: block;
}
</style>
</head>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script>
// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
ctx = canvas.getContext( '2d' ),
// full screen dimensions
cw = window.innerWidth,
ch = window.innerHeight,
// firework collection
fireworks = [],
// particle collection
particles = [],
// starting hue
hue = 120,
// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
limiterTotal = 5,
limiterTick = 0,
// this will time the auto launches of fireworks, one launch per 80 loop ticks
timerTotal = 80,
timerTick = 0,
mousedown = false,
// mouse x coordinate,
mx,
// mouse y coordinate
my;
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
var xDistance = p1x - p2x,
yDistance = p1y - p2y;
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
// actual coordinates
this.x = sx;
this.y = sy;
// starting coordinates
this.sx = sx;
this.sy = sy;
// target coordinates
this.tx = tx;
this.ty = ty;
// distance from starting point to target
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
this.distanceTraveled = 0;
// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 3;
// populate initial coordinate collection with the current coordinates
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 );
// circle target indicator radius
this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// cycle the circle target indicator radius
if( this.targetRadius < 8 ) {
this.targetRadius += 0.3;
} else {
this.targetRadius = 1;
}
// speed up the firework
this.speed *= this.acceleration;
// get the current velocities based on angle and speed
var vx = Math.cos( this.angle ) * this.speed,
vy = Math.sin( this.angle ) * this.speed;
// how far will the firework have traveled with velocities applied?
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
if( this.distanceTraveled >= this.distanceToTarget ) {
createParticles( this.tx, this.ty );
// remove the firework, use the index passed into the update function to determine which to remove
fireworks.splice( index, 1 );
} else {
// target not reached, keep traveling
this.x += vx;
this.y += vy;
}
}
// draw firework
Firework.prototype.draw = function() {
ctx.beginPath();
// move to the last tracked coordinate in the set, then draw a line to the current x and y
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();
// draw the target for this firework with a pulsing circle
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
ctx.stroke();
}
// create particle
function Particle( x, y ) {
this.x = x;
this.y = y;
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
this.coordinates = [];
this.coordinateCount = 5;
while( this.coordinateCount-- ) {
this.coordinates.push( [ this.x, this.y ] );
}
// set a random angle in all possible directions, in radians
this.angle = random( 0, Math.PI * 2 );
this.speed = random( 1, 10 );
// friction will slow the particle down
this.friction = 0.95;
// gravity will be applied and pull the particle down
this.gravity = 1;
// set the hue to a random number +-20 of the overall hue variable
this.hue = random( hue - 20, hue + 20 );
this.brightness = random( 50, 80 );
this.alpha = 1;
// set how fast the particle fades out
this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
// remove last item in coordinates array
this.coordinates.pop();
// add current coordinates to the start of the array
this.coordinates.unshift( [ this.x, this.y ] );
// slow down the particle
this.speed *= this.friction;
// apply velocity
this.x += Math.cos( this.angle ) * this.speed;
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
// fade out the particle
this.alpha -= this.decay;
// remove the particle once the alpha is low enough, based on the passed in index
if( this.alpha <= this.decay ) {
particles.splice( index, 1 );
}
}
// draw particle
Particle.prototype.draw = function() {
ctx. beginPath();
// move to the last tracked coordinates in the set, then draw a line to the current x and y
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();
}
// create particle group/explosion
function createParticles( x, y ) {
// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
var particleCount = 30;
while( particleCount-- ) {
particles.push( new Particle( x, y ) );
}
}
// main demo loop
function loop() {
// this function will run endlessly with requestAnimationFrame
requestAnimFrame( loop );
// increase the hue to get different colored fireworks over time
hue += 0.5;
// normally, clearRect() would be used to clear the canvas
// we want to create a trailing effect though
// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
ctx.globalCompositeOperation = 'destination-out';
// decrease the alpha property to create more prominent trails
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect( 0, 0, cw, ch );
// change the composite operation back to our main mode
// lighter creates bright highlight points as the fireworks and particles overlap each other
ctx.globalCompositeOperation = 'lighter';
// loop over each firework, draw it, update it
var i = fireworks.length;
while( i-- ) {
fireworks[ i ].draw();
fireworks[ i ].update( i );
}
// loop over each particle, draw it, update it
var i = particles.length;
while( i-- ) {
particles[ i ].draw();
particles[ i ].update( i );
}
// launch fireworks automatically to random coordinates, when the mouse isn't down
if( timerTick >= timerTotal ) {
if( !mousedown ) {
// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
timerTick = 0;
}
} else {
timerTick++;
}
// limit the rate at which fireworks get launched when mouse is down
if( limiterTick >= limiterTotal ) {
if( mousedown ) {
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
fireworks.push( new Firework( cw / 2, ch, mx, my ) );
limiterTick = 0;
}
} else {
limiterTick++;
}
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
mx = e.pageX - canvas.offsetLeft;
my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
e.preventDefault();
mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
e.preventDefault();
mousedown = false;
});
// once the window loads, we are ready for some fireworks!
window.onload = loop;
</script>
花好月圆烟花
![\"\"](\"https://img-blog.csdnimg.cn/51ea3fda21814410a198d0619e73ba26.gif\")
特点
根据鼠标的点击和移动会绽放烟花，在这个花好月圆之夜，你想到了什么？哈哈哈，是不是特别美好，希望小伙伴们在新的一年能够找到心爱的人吧，也希望有情人终成眷属，争取努努力，为我们代码届在增添一位小小程序猿。
html代码
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
body{margin:0;padding:0;overflow: hidden;}
.city{width:100%;position:fixed;bottom: 0px;z-index: 100;}
.city img{width: 100%;}
</style>
<title>html5夜景放烟花绽放动画效果</title>
</head>
<body onselectstart = "return false">
<div style="height:700px;overflow:hidden;">
<canvas id='cas' style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas>
<div class="city"><img src="img/city.png" alt="" /></div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/>
<div style="display:none">
<div class="shape">新年快乐</div>
<div class="shape">合家幸福</div>
<div class="shape">万事如意</div>
<div class="shape">心想事成</div>
<div class="shape">财源广进</div>
</div>
</div>
<script>
var canvas = document.getElementById("cas");
var ocas = document.createElement("canvas");
var octx = ocas.getContext("2d");
var ctx = canvas.getContext("2d");
ocas.width = canvas.width = window.innerWidth;
ocas.height = canvas.height = 700;
var bigbooms = [];
window.onload = function(){
initAnimate()
}
function initAnimate(){
drawBg();
lastTime = new Date();
animate();
}
var lastTime;
function animate(){
ctx.save();
ctx.fillStyle = "rgba(0,5,24,0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
var newTime = new Date();
if(newTime-lastTime>500+(window.innerHeight-767)/2){
var random = Math.random()*100>2?true:false;
var x = getRandom(canvas.width/5 , canvas.width*4/5);
var y = getRandom(50 , 200);
if(random){
var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
bigbooms.push(bigboom)
}
else {
var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:canvas.width/2 , y:200} , document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);
bigbooms.push(bigboom)
}
lastTime = newTime;
console.log(bigbooms)
}
stars.foreach(function(){
this.paint();
})
drawMoon();
bigbooms.foreach(function(index){
var that = this;
if(!this.dead){
this._move();
this._drawLight();
}
else{
this.booms.foreach(function(index){
if(!this.dead) {
this.moveTo(index);
}
else if(index === that.booms.length-1){
bigbooms[bigbooms.indexOf(that)] = null;
}
})
}
});
raf(animate);
}
function drawMoon(){
var moon = document.getElementById("moon");
var centerX = canvas.width-200 , centerY = 100 , width = 80;
if(moon.complete){
ctx.drawImage(moon , centerX , centerY , width , width )
}
else {
moon.onload = function(){
ctx.drawImage(moon ,centerX , centerY , width , width)
}
}
var index = 0;
for(var i=0;i<10;i++){
ctx.save();
ctx.beginPath();
ctx.arc(centerX+width/2 , centerY+width/2 , width/2+index , 0 , 2*Math.PI);
ctx.fillStyle="rgba(240,219,120,0.005)";
index+=2;
ctx.fill();
ctx.restore();
}
}
Array.prototype.foreach = function(callback){
for(var i=0;i<this.length;i++){
if(this[i]!==null) callback.apply(this[i] , [i])
}
}
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
canvas.onclick = function(){
var x = event.clientX;
var y = event.clientY;
var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
bigbooms.push(bigboom)
}
// canvas.addEventLisener("touchstart" , function(event){
// var touch = event.targetTouches[0];
// var x = event.pageX;
// var y = event.pageY;
// var bigboom = new Boom(getRandom(canvas.width/3,canvas.width*2/3) ,2,"#FFF" , {x:x , y:y});
// bigbooms.push(bigboom)
// })
var Boom = function(x,r,c,boomArea,shape){
this.booms = [];
this.x = x;
this.y = (canvas.height+r);
this.r = r;
this.c = c;
this.shape = shape || false;
this.boomArea = boomArea;
this.theta = 0;
this.dead = false;
this.ba = parseInt(getRandom(80 , 200));
}
Boom.prototype = {
_paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.fillStyle = this.c;
ctx.fill();
ctx.restore();
},
_move:function(){
var dx = this.boomArea.x - this.x , dy = this.boomArea.y - this.y;
this.x = this.x+dx*0.01;
this.y = this.y+dy*0.01;
if(Math.abs(dx)<=this.ba && Math.abs(dy)<=this.ba){
if(this.shape){
this._shapBoom();
}
else this._boom();
this.dead = true;
}
else {
this._paint();
}
},
_drawLight:function(){
ctx.save();
ctx.fillStyle = "rgba(255,228,150,0.3)";
ctx.beginPath();
ctx.arc(this.x , this.y , this.r+3*Math.random()+1 , 0 , 2*Math.PI);
ctx.fill();
ctx.restore();
},
_boom:function(){
var fragNum = getRandom(30 , 200);
var style = getRandom(0,10)>=5? 1 : 2;
var color;
if(style===1){
color = {
a:parseInt(getRandom(128,255)),
b:parseInt(getRandom(128,255)),
c:parseInt(getRandom(128,255))
}
}
var fanwei = parseInt(getRandom(300, 400));
for(var i=0;i<fragNum;i++){
if(style===2){
color = {
a:parseInt(getRandom(128,255)),
b:parseInt(getRandom(128,255)),
c:parseInt(getRandom(128,255))
}
}
var a = getRandom(-Math.PI, Math.PI);
var x = getRandom(0, fanwei) * Math.cos(a) + this.x;
var y = getRandom(0, fanwei) * Math.sin(a) + this.y;
var radius = getRandom(0 , 2)
var frag = new Frag(this.x , this.y , radius , color , x , y );
this.booms.push(frag);
}
},
_shapBoom:function(){
var that = this;
putValue(ocas , octx , this.shape , 5, function(dots){
var dx = canvas.width/2-that.x;
var dy = canvas.height/2-that.y;
for(var i=0;i<dots.length;i++){
color = {a:dots[i].a,b:dots[i].b,c:dots[i].c}
var x = dots[i].x;
var y = dots[i].y;
var radius = 1;
var frag = new Frag(that.x , that.y , radius , color , x-dx , y-dy);
that.booms.push(frag);
}
})
}
}
function putValue(canvas , context , ele , dr , callback){
context.clearRect(0,0,canvas.width,canvas.height);
var img = new Image();
if(ele.innerHTML.indexOf("img")>=0){
img.src = ele.getElementsByTagName("img")[0].src;
imgload(img , function(){
context.drawImage(img , canvas.width/2 - img.width/2 , canvas.height/2 - img.width/2);
dots = getimgData(canvas , context , dr);
callback(dots);
})
}
else {
var text = ele.innerHTML;
context.save();
var fontSize =200;
context.font = fontSize+"px 宋体 bold";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "rgba("+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+","+parseInt(getRandom(128,255))+" , 1)";
context.fillText(text , canvas.width/2 , canvas.height/2);
context.restore();
dots = getimgData(canvas , context , dr);
callback(dots);
}
}
function imgload(img , callback){
if(img.complete){
callback.call(img);
}
else {
img.onload = function(){
callback.call(this);
}
}
}
function getimgData(canvas , context , dr){
var imgData = context.getImageData(0,0,canvas.width , canvas.height);
context.clearRect(0,0,canvas.width , canvas.height);
var dots = [];
for(var x=0;x<imgData.width;x+=dr){
for(var y=0;y<imgData.height;y+=dr){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] > 128){
var dot = {x:x , y:y , a:imgData.data[i] , b:imgData.data[i+1] , c:imgData.data[i+2]};
dots.push(dot);
}
}
}
return dots;
}
function getRandom(a , b){
return Math.random()*(b-a)+a;
}
var maxRadius = 1 , stars=[];
function drawBg(){
for(var i=0;i<100;i++){
var r = Math.random()*maxRadius;
var x = Math.random()*canvas.width;
var y = Math.random()*2*canvas.height - canvas.height;
var star = new Star(x , y , r);
stars.push(star);
star.paint()
}
}
var Star = function(x,y,r){
this.x = x;this.y=y;this.r=r;
}
Star.prototype = {
paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x , this.y , this.r , 0 , 2*Math.PI);
ctx.fillStyle = "rgba(255,255,255,"+this.r+")";
ctx.fill();
ctx.restore();
}
}
var focallength = 250;
var Frag = function(centerX , centerY , radius , color ,tx , ty){
this.tx = tx;
this.ty = ty;
this.x = centerX;
this.y = centerY;
this.dead = false;
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
}
Frag.prototype = {
paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
ctx.fill()
ctx.restore();
},
moveTo:function(index){
this.ty = this.ty+0.3;
var dx = this.tx - this.x , dy = this.ty - this.y;
this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
if(dx===0 && Math.abs(dy)<=80){
this.dead = true;
}
this.paint();
}
}
</script>
</body>
</html>
心动一刹烟花
![\"\"](\"https://img-blog.csdnimg.cn/e29ed1e60bc14a0bb96348b45112783b.gif\")
特点
这是最后一个烟花了，我知道也许很少有人会看到这里，可能很多人觉得有趣就直接点了收藏，然后让它一直沉浸收藏夹里，直至落灰，最后的烟花其实不是送给你们的，是送给我的，送给自己这个太过糟糕的一年，大起大落，唉，也许家家有本难念的经吧，小的时候就有一个梦想，能不能学会斑的无限月读，让世界永远和平，人们再无痛苦，可看看那浩瀚的星空，自己又何尝不是很迷茫，人为何而生？我现在所做的事情的又为何？算了，不说了，说多了，哈哈哈，如果你能看到这的话，我可以问你一个问题么？
就你而然，你觉得根据你现在的阅历和经历，人活着的意义是什么呢？可以在评论区告诉我么？
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas五彩烟花动画特效</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/firework.js"></script>
<script type="text/javascript">
$(function(){
$("#example").fireworks({
width: "100%",
height: "100%"
});
});
</script>
</body>
</html>
js
(function ($) {
$.fn.fireworks = function(options){
options = options || {};
options.width = options.width || $(this).width();
options.height = options.height || $(this).height();
var fireworksField = this,
SCREEN_WIDTH = options.width,
SCREEN_HEIGHT = options.height,
rockets = [],
particles = [];
var canvas = document.createElement("canvas");
canvas.style.width = SCREEN_WIDTH + 'px';
canvas.style.height = SCREEN_HEIGHT + 'px';
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';
var context = canvas.getContext('2d');
var mousePos = {};
var gravity = 0.05;
var raf;
$(fireworksField).append(canvas);
document.onmousemove = mouseMove;
setInterval(launch, 2000);
//setInterval(loop, 20);
raf = window.requestAnimationFrame(loop);
function mouseMove(ev){
ev = ev || window.event;
mousePos = mousePosition(ev);
}
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function launch() {
if (rockets.length < 10) {
var rocket = new Rocket(SCREEN_WIDTH/2);
rocket.v.x = Math.random() * 6 - 3;
rocket.v.y = Math.random() * -30 -4;
rocket.color = Math.floor(Math.random() * 360 / 10) * 10;
rockets.push(rocket);
}
}
function loop () {
var existRockets = [];
var existParticles = [];
if (SCREEN_WIDTH != window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.innerWidth;
}
if (SCREEN_HEIGHT != window.innerHeight) {
canvas.height = SCREEN_HEIGHT = window.innerHeight;
}
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
//context.save();
for (var i = 0; i < rockets.length; i ++) {
rockets[i].update();
rockets[i].render(context);
//explosion rules
//1.above the 4/5 screen
//2.close to the mouse
//3.1% random chance above the 1/2 screen
var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
var randomChance = (rockets[i].pos.y < SCREEN_HEIGHT/2)? (Math.random() * 100 <= 1) : false;
if (rockets[i].pos.y < SCREEN_HEIGHT/5 || distance <= 50 || randomChance) {
rockets[i].explode();
}else{
existRockets.push(rockets[i]);
}
}
rockets = existRockets;
for (var i = 0; i < particles.length; i ++) {
particles[i].update();
if (particles[i].exist()) {
particles[i].render(context);
existParticles.push(particles[i]);
}
}
particles = existParticles;
//context.restore();
raf = window.requestAnimationFrame(loop);
}
//the particles object
function Particle (pos) {
this.pos = {
x : pos? pos.x:0,
y : pos? pos.y:0
};
this.v = {
x : 0,
y : 0
};
this.resistance = 0.005;
this.size = 5;
this.shrink = 0.99;
this.alpha = 1;
this.fade = 0.97;
this.color = "";
}
Particle.prototype.update = function () {
this.v.x += this.resistance;
this.v.y -= this.resistance;
//gravity
this.v.y += gravity;
this.pos.x += this.v.x;
this.pos.y += this.v.y;
this.size *= this.shrink;
this.alpha *= this.fade;
}
Particle.prototype.render = function () {
var x = this.pos.x,
y = this.pos.y,
r = this.size/2;
var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0, "rgba(255, 255, 255, "+ this.alpha +")");
gradient.addColorStop(0.9, "hsla(" + this.color + ", 100%, 50%, 1)");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
context.fillStyle = gradient;
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
Particle.prototype.exist = function () {
if (this.alpha >= 0.02 && this.size > 0.8) {
return true;
}else{
return false;
}
}
//the rocket object
function Rocket (x) {
Particle.apply(this, [{
x : x,
y : SCREEN_HEIGHT
}]);
}
(function () {
var Super = function () {};
Super.prototype = Particle.prototype;
Rocket.prototype = new Super();
})();
Rocket.prototype.constructor = Rocket;
Rocket.prototype.update = function () {
this.pos.x += this.v.x;
this.pos.y += this.v.y;
}
Rocket.prototype.render = function (context) {
var x = this.pos.x,
y = this.pos.y,
r = this.size/2;
var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0, "#ffff00");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
context.fillStyle = gradient;
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
Rocket.prototype.explode = function () {
var count = getGaussianDistributionNumber(240, 20);
for (var i = 0; i <= count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
var speed = getGaussianDistributionNumber(2.5, 0.3);
particle.size = 3;
particle.v.x = Math.cos(angle) * speed;
particle.v.y = Math.sin(angle) * speed;
particle.color = this.color;
particles.push(particle);
}
}
function getGaussianDistributionNumber (mean, std_dev) {
var U1 = -Math.random() + 1;
var U2 = -Math.random() + 1;
var R = Math.sqrt(-2 * Math.log(U2));
var a = 2 * Math.PI * U1;
var Z = R * Math.cos(a);
return mean + (Z * std_dev);
}
}
}(jQuery));
春节对联
哎，小伙伴们，这个对联确确实实是总给你们的，希望你们在新的一年，码到成功！！！
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/81d6d1a632af4b3f83590ab821a0c621.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5q2l5bCU5pav54m5,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center\")
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>春联</title>
</head>
<body>
<style>
.font{ font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold;
background-color: #FF0000 }
.font1{ font-family: 隶书; font-size: 36pt; color: #000000; font-weight: bold }
-->
</style>
<div style="position: absolute; top: 80; left: 217; width: 320; height: 386; font-size: 240pt; color: red">◆</div>
<div style="position: absolute; top: 195; left: 305; width: 160; height: 160; font-size: 110pt; font-family: 隶书">淦</div>
<div style="position: absolute; top: 10; left: 120; width: 527; height: 388">
<table border="0" cellpadding="0" cellspacing="0" width="527" height="231">
<tr>
<td height="21" width="46"></td>
<td height="21" width="449">
</td>
<td height="21" width="51"></td>
</tr>
<tr>
<td height="211" width="46" align="center" class="font">
<p align="center">
废<br>
寝<br>
忘<br>
食<br>
编<br>
程<br>
序<br>
<td height="211" width="449" align="center"></td>
<td height="211" width="51" align="center" class="font">
闻<br>
机<br>
起<br>
早<br>
保<br>
运<br>
维<br>
</tr>
</table>
</div>
</body>
</html>
<!-- css 代码-->
.couplet_ad
/* 底部固定*/
{position:fixed;bottom:auto; top:0; width: 120px; height: 230px; z-index:99999; margin-top:158px;}
html .couplet_ad
/* IE6 底部固定*/
{_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));}
.couplet_ad a{ display:block; cursor:pointer;}
#ad_left{ left: 0px;}
#ad_right{ right: 0px;}
<!-- html代码 -->
<!-- 对联广告左边 -->
<div class="couplet_ad" id="ad_left">
<a target="_blank" href=""><img src="dl.jpg"></a>
<a onClick="ad_left();">关闭</a>
</div>
<!-- 对联广告右边 -->
<div class="couplet_ad" id="ad_right">
<a target="_blank" href=""><img src="dl.jpg"></a>
<a onClick="ad_right();">关闭</a>
</div>
<!-- js关闭按钮代码 -->
<script language="javascript">
function ad_left(){
document.getElementById('ad_left').style.display="none";
}
function ad_right(){
document.getElementById('ad_right').style.display="none";
}
</script>