文章目录
加特林版烟花
特点
根据鼠标点击的速度出现烟花，像加特林一样哒哒哒，希望朋友们在2022年能够像加特林一样疯狂输出，打败所有的不甘与平凡，向着自己的梦想努力前进着
html代码
<!DOCTYPEhtml><html><head><metahttp-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><scripttype="text/javascript"src="js/jquery-2.0.0.min.js"></script><scripttype="text/javascript">$(function(){varFireworks=function(){var self =this;varrand=function(rMi, rMa){return~~((Math.random()*(rMa-rMi+1))+rMi);}varhitTest=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(){returnfalse;};};
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 =newFireworks();});</script></body></html>
漫天飞雨烟花
特点
根据鼠标的速度和点击会绽放出烟花，为何叫漫天飞雨呢，因为这个特效特别像“霞”的R技能，希望朋友们在这个不平凡的一年能够躲避所有不好的事情，也能够克服各种困难，像霞一样释放大招，征服生活，漫天飞雨。
HTML代码
<!DOCTYPEhtml><htmldir="ltr"lang="zh-CN"><head><metacharset="UTF-8"/><metaname="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><canvasid="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 demovar 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 rangefunctionrandom(min, max){return Math.random()*( max - min )+ min;}// calculate the distance between two pointsfunctioncalculateDistance(p1x, p1y, p2x, p2y){var xDistance = p1x - p2x,
yDistance = p1y - p2y;return Math.sqrt( Math.pow( xDistance,2)+ Math.pow( yDistance,2));}// create fireworkfunctionFirework(sx, sy, tx, ty){// actual coordinatesthis.x = sx;this.y = sy;// starting coordinatesthis.sx = sx;this.sy = sy;// target coordinatesthis.tx = tx;this.ty = ty;// distance from starting point to targetthis.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 trailsthis.coordinates =[];this.coordinateCount =3;// populate initial coordinate collection with the current coordinateswhile(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 radiusthis.targetRadius =1;}// update fireworkFirework.prototype.update=function(index){// remove last item in coordinates arraythis.coordinates.pop();// add current coordinates to the start of the arraythis.coordinates.unshift([this.x,this.y ]);// cycle the circle target indicator radiusif(this.targetRadius <8){this.targetRadius +=0.3;}else{this.targetRadius =1;}// speed up the fireworkthis.speed *=this.acceleration;// get the current velocities based on angle and speedvar 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 reachedif(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 travelingthis.x += vx;this.y += vy;}}// draw fireworkFirework.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 particlefunctionParticle(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 trailsthis.coordinates =[];this.coordinateCount =5;while(this.coordinateCount--){this.coordinates.push([this.x,this.y ]);}// set a random angle in all possible directions, in radiansthis.angle =random(0, Math.PI*2);this.speed =random(1,10);// friction will slow the particle downthis.friction =0.95;// gravity will be applied and pull the particle downthis.gravity =1;// set the hue to a random number +-20 of the overall hue variablethis.hue =random( hue -20, hue +20);this.brightness =random(50,80);this.alpha =1;// set how fast the particle fades outthis.decay =random(0.015,0.03);}// update particleParticle.prototype.update=function(index){// remove last item in coordinates arraythis.coordinates.pop();// add current coordinates to the start of the arraythis.coordinates.unshift([this.x,this.y ]);// slow down the particlethis.speed *=this.friction;// apply velocitythis.x += Math.cos(this.angle )*this.speed;this.y += Math.sin(this.angle )*this.speed +this.gravity;// fade out the particlethis.alpha -=this.decay;// remove the particle once the alpha is low enough, based on the passed in indexif(this.alpha <=this.decay ){
particles.splice( index,1);}}// draw particleParticle.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/explosionfunctioncreateParticles(x, y){// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles thoughvar particleCount =30;while( particleCount--){
particles.push(newParticle( x, y ));}}// main demo loopfunctionloop(){// this function will run endlessly with requestAnimationFramerequestAnimFrame( 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 itvar i = fireworks.length;while( i--){
fireworks[ i ].draw();
fireworks[ i ].update( i );}// loop over each particle, draw it, update itvar i = particles.length;while( i--){
particles[ i ].draw();
particles[ i ].update( i );}// launch fireworks automatically to random coordinates, when the mouse isn't downif( 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(newFirework( 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 downif( 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(newFirework( 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>
花好月圆烟花
特点
根据鼠标的点击和移动会绽放烟花，在这个花好月圆之夜，你想到了什么？哈哈哈，是不是特别美好，希望小伙伴们在新的一年能够找到心爱的人吧，也希望有情人终成眷属，争取努努力，为我们代码届在增添一位小小程序猿。
html代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head><metahttp-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><bodyonselectstart="return false"><divstyle="height:700px;overflow:hidden;"><canvasid='cas'style="background-color:rgba(0,5,24,1);">浏览器不支持canvas</canvas><divclass="city"><imgsrc="img/city.png"alt=""/></div><imgsrc="img/moon.png"alt=""id="moon"style="visibility: hidden;"/><divstyle="display:none"><divclass="shape">新年快乐</div><divclass="shape">合家幸福</div><divclass="shape">万事如意</div><divclass="shape">心想事成</div><divclass="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()}functioninitAnimate(){drawBg();
lastTime =newDate();animate();}var lastTime;functionanimate(){
ctx.save();
ctx.fillStyle ="rgba(0,5,24,0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();var newTime =newDate();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 =newBoom(getRandom(canvas.width/3,canvas.width*2/3),2,"#FFF",{x:x ,y:y});
bigbooms.push(bigboom)}else{var bigboom =newBoom(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);}elseif(index === that.booms.length-1){
bigbooms[bigbooms.indexOf(that)]=null;}})}});raf(animate);}functiondrawMoon(){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 =newBoom(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)// })varBoom=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();}elsethis._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 =newFrag(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 =newFrag(that.x , that.y , radius , color , x-dx , y-dy);
that.booms.push(frag);}})}}functionputValue(canvas , context , ele , dr , callback){
context.clearRect(0,0,canvas.width,canvas.height);var img =newImage();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);}}functionimgload(img , callback){if(img.complete){callback.call(img);}else{
img.onload=function(){callback.call(this);}}}functiongetimgData(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;}functiongetRandom(a , b){return Math.random()*(b-a)+a;}var maxRadius =1, stars=[];functiondrawBg(){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 =newStar(x , y , r);
stars.push(star);
star.paint()}}varStar=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;varFrag=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>
心动一刹烟花
特点
这是最后一个烟花了，我知道也许很少有人会看到这里，可能很多人觉得有趣就直接点了收藏，然后让它一直沉浸收藏夹里，直至落灰，最后的烟花其实不是送给你们的，是送给我的，送给自己这个太过糟糕的一年，大起大落，唉，也许家家有本难念的经吧，小的时候就有一个梦想，能不能学会斑的无限月读，让世界永远和平，人们再无痛苦，可看看那浩瀚的星空，自己又何尝不是很迷茫，人为何而生？我现在所做的事情的又为何？算了，不说了，说多了，哈哈哈，如果你能看到这的话，我可以问你一个问题么？
就你而然，你觉得根据你现在的阅历和经历，人活着的意义是什么呢？可以在评论区告诉我么？
Html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>HTML5 Canvas五彩烟花动画特效</title><style>*{padding: 0;margin: 0;}</style></head><body><divid="example"></div><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/firework.js"></script><scripttype="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));
春节对联
哎，小伙伴们，这个对联确确实实是总给你们的，希望你们在新的一年，码到成功！！！
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-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><divstyle="position: absolute;top: 80;left: 217;width: 320;height: 386;font-size: 240pt;color: red">◆</div><divstyle="position: absolute;top: 195;left: 305;width: 160;height: 160;font-size: 110pt;font-family: 隶书">淦</div><divstyle="position: absolute;top: 10;left: 120;width: 527;height: 388"><tableborder="0"cellpadding="0"cellspacing="0"width="527"height="231"><tr><tdheight="21"width="46"></td><tdheight="21"width="449"></td><tdheight="21"width="51"></td></tr><tr><tdheight="211"width="46"align="center"class="font"><palign="center">
废<br>
寝<br>
忘<br>
食<br>
编<br>
程<br>
序<br><tdheight="211"width="449"align="center"></td><tdheight="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>
本文转载自: https://blog.csdn.net/CSDN_SAVIOR/article/details/122595099
版权归原作者 步尔斯特 所有， 如有侵权，请联系我们删除。
版权归原作者 步尔斯特 所有， 如有侵权，请联系我们删除。