devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

新年将至，100行Html+css实现烟花特效陪你跨年（附春节对联）_html5 新年页面

作者：2023面试高手 | 2024-02-16 04:49:58

赞

踩

html5 新年页面

文章目录

加特林版烟花


特点

根据鼠标点击的速度出现烟花，像加特林一样哒哒哒，希望朋友们在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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
漫天飞雨烟花


特点

根据鼠标的速度和点击会绽放出烟花，为何叫漫天飞雨呢，因为这个特效特别像“霞”的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>




  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
花好月圆烟花


特点

根据鼠标的点击和移动会绽放烟花，在这个花好月圆之夜，你想到了什么？哈哈哈，是不是特别美好，希望小伙伴们在新的一年能够找到心爱的人吧，也希望有情人终成眷属，争取努努力，为我们代码届在增添一位小小程序猿。

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
心动一刹烟花


特点

这是最后一个烟花了，我知道也许很少有人会看到这里，可能很多人觉得有趣就直接点了收藏，然后让它一直沉浸收藏夹里，直至落灰，最后的烟花其实不是送给你们的，是送给我的，送给自己这个太过糟糕的一年，大起大落，唉，也许家家有本难念的经吧，小的时候就有一个梦想，能不能学会斑的无限月读，让世界永远和平，人们再无痛苦，可看看那浩瀚的星空，自己又何尝不是很迷茫，人为何而生？我现在所做的事情的又为何？算了，不说了，说多了，哈哈哈，如果你能看到这的话，我可以问你一个问题么？

就你而然，你觉得根据你现在的阅历和经历，人活着的意义是什么呢？可以在评论区告诉我么？

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>



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

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));


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
春节对联

哎，小伙伴们，这个对联确确实实是总给你们的，希望你们在新的一年，码到成功！！！

在这里插入图片描述

<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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
<!-- 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/90855
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号