除夕用不同的语言编写绚丽的烟花

不同语言编写的绚丽烟花

简单Html先来一个简单的形象实现烟花（绝对绚丽）

先看效果
请添加图片描述
源码

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html5 canvas除夕烟花</title><base target="_blank"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/normalize.css"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/hovertree.css"></head><body><div class="hovertree"></div><script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"></script><script type="text/javascript" src="http://hovertree.com/texiao/html5/43/js/jquery.fireworks.js"></script><script type="text/javascript">$('.hovertree').fireworks({
      sound:true,// sound effect
      opacity:0.9, 
      width:'100%', 
      height:'100%'});</script><div style="width:340px;position:fixed;z-index:99;"><a href="http://hovertree.com/"></a><a href="http://hovertree.com/h/bjag/me34x8fk.htm"></a></div></body></html>

HTML+Canvas(内含js)

我们先看实现效果
在这里插入图片描述

源码如下，一共三百多行

<!doctype html><html><head><meta charset="utf-8"><title>除夕炫彩</title><style>
html,body{
    margin:0px;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;}</style></head><body><canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas><canvas style="position:absolute;width:100%;height:100%;z-index:9999"class="canvas"></canvas><div class="overlay"><div class="tabs"><div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div><div class="tabs-panels"><ul class="tabs-panel commands"></ul></div></div></div><script>functioninitVars(){
    pi=Math.PI;
    ctx=canvas.getContext("2d");
    canvas.width=canvas.clientWidth;
    canvas.height=canvas.clientHeight;
    cx=canvas.width/2;
    cy=canvas.height/2;
    playerZ=-25;
    playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
    scale=600;
    seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
    seeds=newArray();
    sparkPics=newArray();
    s="https://cantelope.org/NYE/";for(i=1;i<=10;++i){
        sparkPic=newImage();
        sparkPic.src=s+"spark"+i+".png";
        sparkPics.push(sparkPic);}
    sparks=newArray();
    pow1=newAudio(s+"pow1.ogg");
    pow2=newAudio(s+"pow2.ogg");
    pow3=newAudio(s+"pow3.ogg");
    pow4=newAudio(s+"pow4.ogg");
    frames =0;}functionrasterizePoint(x,y,z){var p,d;
    x-=playerX;
    y-=playerY;
    z-=playerZ;
    p=Math.atan2(x,z);
    d=Math.sqrt(x*x+z*z);
    x=Math.sin(p-yaw)*d;
    z=Math.cos(p-yaw)*d;
    p=Math.atan2(y,z);
    d=Math.sqrt(y*y+z*z);
    y=Math.sin(p-pitch)*d;
    z=Math.cos(p-pitch)*d;var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);if(!uc)return{x:0,y:0,d:-1};var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return{
            x:cx+(rx1+ua*(rx2-rx1))*scale,
            y:cy+y/z*scale,
            d:Math.sqrt(x*x+y*y+z*z)};}else{return{
            x:cx+(rx1+ua*(rx2-rx1))*scale,
            y:cy+y/z*scale,
            d:-1};}}functionspawnSeed(){
    seed=newObject();
    seed.x=-50+Math.random()*100;
    seed.y=25;
    seed.z=-50+Math.random()*100;
    seed.vx=.1-Math.random()*.2;
    seed.vy=-1.5;//*(1+Math.random()/2);
    seed.vz=.1-Math.random()*.2;
    seed.born=frames;
    seeds.push(seed);}functionsplode(x,y,z){
    t=5+parseInt(Math.random()*150);
    sparkV=1+Math.random()*2.5;
    type=parseInt(Math.random()*3);switch(type){case0:
            pic1=parseInt(Math.random()*10);break;case1:
            pic1=parseInt(Math.random()*10);do{ pic2=parseInt(Math.random()*10);}while(pic2==pic1);break;case2:
            pic1=parseInt(Math.random()*10);do{ pic2=parseInt(Math.random()*10);}while(pic2==pic1);do{ pic3=parseInt(Math.random()*10);}while(pic3==pic1 || pic3==pic2);break;}for(m=1;m<t;++m){
        spark=newObject();
        spark.x=x; spark.y=y; spark.z=z;
        p1=pi*2*Math.random();
        p2=pi*Math.random();
        v=sparkV*(1+Math.random()/6)
        spark.vx=Math.sin(p1)*Math.sin(p2)*v;
        spark.vz=Math.cos(p1)*Math.sin(p2)*v;
        spark.vy=Math.cos(p2)*v;switch(type){case0: spark.img=sparkPics[pic1];break;case1:
                spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];break;case2:switch(parseInt(Math.random()*3)){case0: spark.img=sparkPics[pic1];break;case1: spark.img=sparkPics[pic2];break;case2: spark.img=sparkPics[pic3];break;}break;}
        spark.radius=25+Math.random()*50;
        spark.alpha=1;
        spark.trail=newArray();
        sparks.push(spark);}switch(parseInt(Math.random()*4)){case0:    pow=newAudio(s+"pow1.ogg");break;case1:    pow=newAudio(s+"pow2.ogg");break;case2:    pow=newAudio(s+"pow3.ogg");break;case3:    pow=newAudio(s+"pow4.ogg");break;}
    d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
    pow.volume=1.5/(1+d/10);
    pow.play();}functiondoLogic(){if(seedTimer<frames){
        seedTimer=frames+seedInterval*Math.random()*10;spawnSeed();}for(i=0;i<seeds.length;++i){
        seeds[i].vy+=gravity;
        seeds[i].x+=seeds[i].vx;
        seeds[i].y+=seeds[i].vy;
        seeds[i].z+=seeds[i].vz;if(frames-seeds[i].born>seedLife){splode(seeds[i].x,seeds[i].y,seeds[i].z);
            seeds.splice(i,1);}}for(i=0;i<sparks.length;++i){if(sparks[i].alpha>0&& sparks[i].radius>5){
            sparks[i].alpha-=.01;
            sparks[i].radius/=1.02;
            sparks[i].vy+=gravity;
            point=newObject();
            point.x=sparks[i].x;
            point.y=sparks[i].y;
            point.z=sparks[i].z;if(sparks[i].trail.length){
                x=sparks[i].trail[sparks[i].trail.length-1].x;
                y=sparks[i].trail[sparks[i].trail.length-1].y;
                z=sparks[i].trail[sparks[i].trail.length-1].z;
                d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));if(d>9){
                    sparks[i].trail.push(point);}}else{
                sparks[i].trail.push(point);}if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);
            sparks[i].x+=sparks[i].vx;
            sparks[i].y+=sparks[i].vy;
            sparks[i].z+=sparks[i].vz;
            sparks[i].vx/=1.075;
            sparks[i].vy/=1.075;
            sparks[i].vz/=1.075;}else{
            sparks.splice(i,1);}}
    p=Math.atan2(playerX,playerZ);
    d=Math.sqrt(playerX*playerX+playerZ*playerZ);
    d+=Math.sin(frames/80)/1.25;
    t=Math.sin(frames/200)/40;
    playerX=Math.sin(p+t)*d;
    playerZ=Math.cos(p+t)*d;
    yaw=pi+p+t;}functionrgb(col){var r =parseInt((.5+Math.sin(col)*.5)*16);var g =parseInt((.5+Math.cos(col)*.5)*16);var b =parseInt((.5-Math.sin(col)*.5)*16);return"#"+r.toString(16)+g.toString(16)+b.toString(16);}functiondraw(){
    ctx.clearRect(0,0,cx*2,cy*2);
    ctx.fillStyle="#ff8";for(i=-100;i<100;i+=3){for(j=-100;j<100;j+=4){
            x=i;z=j;y=25;
            point=rasterizePoint(x,y,z);if(point.d!=-1){
                size=250/(1+point.d);
                d = Math.sqrt(x * x + z * z);
                a =0.75- Math.pow(d /100,6)*0.75;if(a>0){
                    ctx.globalAlpha = a;
                    ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}
    ctx.globalAlpha=1;for(i=0;i<seeds.length;++i){
        point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);if(point.d!=-1){
            size=200/(1+point.d);
            ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}
    point1=newObject();for(i=0;i<sparks.length;++i){
        point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);if(point.d!=-1){
            size=sparks[i].radius*200/(1+point.d);if(sparks[i].alpha<0)sparks[i].alpha=0;if(sparks[i].trail.length){
                point1.x=point.x;
                point1.y=point.y;switch(sparks[i].img){case sparkPics[0]:ctx.strokeStyle="#f84";break;case sparkPics[1]:ctx.strokeStyle="#84f";break;case sparkPics[2]:ctx.strokeStyle="#8ff";break;case sparkPics[3]:ctx.strokeStyle="#fff";break;case sparkPics[4]:ctx.strokeStyle="#4f8";break;case sparkPics[5]:ctx.strokeStyle="#f44";break;case sparkPics[6]:ctx.strokeStyle="#f84";break;case sparkPics[7]:ctx.strokeStyle="#84f";break;case sparkPics[8]:ctx.strokeStyle="#fff";break;case sparkPics[9]:ctx.strokeStyle="#44f";break;}for(j=sparks[i].trail.length-1;j>=0;--j){
                    point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);if(point2.d!=-1){
                        ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
                        ctx.beginPath();
                        ctx.moveTo(point1.x,point1.y);
                        ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
                        ctx.lineTo(point2.x,point2.y);
                        ctx.stroke();
                        point1.x=point2.x;
                        point1.y=point2.y;}}}
            ctx.globalAlpha=sparks[i].alpha;
            ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);}}}functionframe(){if(frames>100000){
        seedTimer=0;
        frames=0;}
    frames++;draw();doLogic();requestAnimationFrame(frame);}
window.addEventListener("resize",()=>{
    canvas.width=canvas.clientWidth;
    canvas.height=canvas.clientHeight;
    cx=canvas.width/2;
    cy=canvas.height/2;});initVars();frame();</script><script src="js/index.js"></script></body></html>

下面是引用的js源码，js渲染需要比较多的代码。

varS={init:function(){var action = window.location.href,
        i = action.indexOf('?a=');S.Drawing.init('.canvas');
    document.body.classList.add('body--ready');if(i !==-1){S.UI.simulate(decodeURI(action).substring(i +3));}else{S.UI.simulate('除夕节日快乐');}S.Drawing.loop(function(){S.Shape.render();});}};S.Drawing =(function(){var canvas,
      context,
      renderFn
      requestFrame = window.requestAnimationFrame       ||
                     window.webkitRequestAnimationFrame ||
                     window.mozRequestAnimationFrame    ||
                     window.oRequestAnimationFrame      ||
                     window.msRequestAnimationFrame     ||function(callback){
                       window.setTimeout(callback,1000/60);};return{init:function(el){
      canvas = document.querySelector(el);
      context = canvas.getContext('2d');this.adjustCanvas();
      window.addEventListener('resize',function(e){S.Drawing.adjustCanvas();});},loop:function(fn){
      renderFn =!renderFn ? fn : renderFn;this.clearFrame();renderFn();requestFrame.call(window,this.loop.bind(this));},adjustCanvas:function(){
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;},clearFrame:function(){
      context.clearRect(0,0, canvas.width, canvas.height);},getArea:function(){return{ w: canvas.width, h: canvas.height };},drawCircle:function(p, c){
      context.fillStyle = c.render();
      context.beginPath();
      context.arc(p.x, p.y, p.z,0,2* Math.PI,true);
      context.closePath();
      context.fill();}}}());S.UI=(function(){var canvas = document.querySelector('.canvas'),
      interval,
      isTouch =false,//('ontouchstart' in window || navigator.msMaxTouchPoints),
      currentAction,
      resizeTimer,
      time,
      maxShapeSize =30,
      firstAction =true,
      sequence =[],
      cmd ='#';functionformatTime(date){var h = date.getHours(),
        m = date.getMinutes(),
    m = m <10?'0'+ m : m;return h +':'+ m;}functiongetValue(value){return value && value.split(' ')[1];}functiongetAction(value){
    value = value && value.split(' ')[0];return value && value[0]=== cmd && value.substring(1);}functiontimedAction(fn, delay, max, reverse){clearInterval(interval);
    currentAction = reverse ? max :1;fn(currentAction);if(!max ||(!reverse && currentAction < max)||(reverse && currentAction >0)){
      interval =setInterval(function(){
        currentAction = reverse ? currentAction -1: currentAction +1;fn(currentAction);if((!reverse && max && currentAction === max)||(reverse && currentAction ===0)){clearInterval(interval);}}, delay);}}functionreset(destroy){clearInterval(interval);
    sequence =[];
    time =null;
    destroy &&S.Shape.switchShape(S.ShapeBuilder.letter(''));}functionperformAction(value){var action,
        value,
        current;// overlay.classList.remove('overlay--visible');
    sequence =typeof(value)==='object'? value : sequence.concat(value.split('|'));// input.value = '';// checkInputWidth();timedAction(function(index){
      current = sequence.shift();
      action =getAction(current);
      value =getValue(current);switch(action){case'countdown':
          value =parseInt(value)||10;
          value = value >0? value :10;timedAction(function(index){if(index ===0){if(sequence.length ===0){S.Shape.switchShape(S.ShapeBuilder.letter(''));}else{performAction(sequence);}}else{S.Shape.switchShape(S.ShapeBuilder.letter(index),true);}},1000, value,true);break;case'rectangle':
          value = value && value.split('x');
          value =(value && value.length ===2)? value :[maxShapeSize, maxShapeSize /2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize,parseInt(value[0])), Math.min(maxShapeSize,parseInt(value[1]))));break;case'circle':
          value =parseInt(value)|| maxShapeSize;
          value = Math.min(value, maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case'time':var t =formatTime(newDate());if(sequence.length >0){S.Shape.switchShape(S.ShapeBuilder.letter(t));}else{timedAction(function(){
              t =formatTime(newDate());if(t !== time){
                time = t;S.Shape.switchShape(S.ShapeBuilder.letter(time));}},1000);}break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0]=== cmd ?'What?': current));}},2000, sequence.length);}functioncheckInputWidth(e){if(input.value.length >18){
      ui.classList.add('ui--wide');}else{
      ui.classList.remove('ui--wide');}if(firstAction && input.value.length >0){
      ui.classList.add('ui--enter');}else{
      ui.classList.remove('ui--enter');}}functionbindEvents(){
    document.body.addEventListener('keydown',function(e){
      input.focus();if(e.keyCode ===13){
        firstAction =false;reset();performAction(input.value);}});
    
    canvas.addEventListener('click',function(e){
      overlay.classList.remove('overlay--visible');});}functioninit(){bindEvents();// input.focus();
    isTouch && document.body.classList.add('touch');}// Initinit();return{simulate:function(action){performAction(action);}}}());S.UI.Tabs =(function(){var tabs = document.querySelector('.tabs'),
      labels = document.querySelector('.tabs-labels'),
      triggers = document.querySelectorAll('.tabs-label'),
      panels = document.querySelectorAll('.tabs-panel');functionactivate(i){
    triggers[i].classList.add('tabs-label--active');
    panels[i].classList.add('tabs-panel--active');}functionbindEvents(){
    labels.addEventListener('click',function(e){var el = e.target,
          index;if(el.classList.contains('tabs-label')){for(var t =0; t < triggers.length; t++){
          triggers[t].classList.remove('tabs-label--active');
          panels[t].classList.remove('tabs-panel--active');if(el === triggers[t]){
            index = t;}}activate(index);}});}functioninit(){activate(0);bindEvents();}// Initinit();}());S.Point=function(args){this.x = args.x;this.y = args.y;this.z = args.z;this.a = args.a;this.h = args.h;};S.Color=function(r, g, b, a){this.r = r;this.g = g;this.b = b;this.a = a;};S.Color.prototype ={render:function(){return'rgba('+this.r +','++this.g +','+this.b +','+this.a +')';}};S.Dot=function(x, y){this.p =newS.Point({
    x: x,
    y: y,
    z:5,
    a:1,
    h:0});this.e =0.07;this.s =true;this.c =newS.Color(255,255,255,this.p.a);this.t =this.clone();this.q =[];};S.Dot.prototype ={clone:function(){returnnewS.Point({
      x:this.x,
      y:this.y,
      z:this.z,
      a:this.a,
      h:this.h
    });},_draw:function(){this.c.a =this.p.a;S.Drawing.drawCircle(this.p,this.c);},_moveTowards:function(n){var details =this.distanceTo(n,true),
        dx = details[0],
        dy = details[1],
        d = details[2],
        e =this.e * d;if(this.p.h ===-1){this.p.x = n.x;this.p.y = n.y;returntrue;}if(d >1){this.p.x -=((dx / d)* e);this.p.y -=((dy / d)* e);}else{if(this.p.h >0){this.p.h--;}else{returntrue;}}returnfalse;},_update:function(){if(this._moveTowards(this.t)){var p =this.q.shift();if(p){this.t.x = p.x ||this.p.x;this.t.y = p.y ||this.p.y;this.t.z = p.z ||this.p.z;this.t.a = p.a ||this.p.a;this.p.h = p.h ||0;}else{if(this.s){this.p.x -= Math.sin(Math.random()*3.142);this.p.y -= Math.sin(Math.random()*3.142);}else{this.move(newS.Point({
            x:this.p.x +(Math.random()*50)-25,
            y:this.p.y +(Math.random()*50)-25,}));}}}
    d =this.p.a -this.t.a;this.p.a = Math.max(0.1,this.p.a -(d *0.05));
    d =this.p.z -this.t.z;this.p.z = Math.max(1,this.p.z -(d *0.05));},distanceTo:function(n, details){var dx =this.p.x - n.x,
        dy =this.p.y - n.y,
        d = Math.sqrt(dx * dx + dy * dy);return details ?[dx, dy, d]: d;},move:function(p, avoidStatic){if(!avoidStatic ||(avoidStatic &&this.distanceTo(p)>1)){this.q.push(p);}},render:function(){this._update();this._draw();}}S.ShapeBuilder =(function(){var gap =13,
      shapeCanvas = document.createElement('canvas'),
      shapeContext = shapeCanvas.getContext('2d'),
      fontSize =500,
      fontFamily ='Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';functionfit(){
    shapeCanvas.width = Math.floor(window.innerWidth / gap)* gap;
    shapeCanvas.height = Math.floor(window.innerHeight / gap)* gap;
    shapeContext.fillStyle ='red';
    shapeContext.textBaseline ='middle';
    shapeContext.textAlign ='center';}functionprocessCanvas(){var pixels = shapeContext.getImageData(0,0, shapeCanvas.width, shapeCanvas.height).data;
        dots =[],
        pixels,
        x =0,
        y =0,
        fx = shapeCanvas.width,
        fy = shapeCanvas.height,
        w =0,
        h =0;for(var p =0; p < pixels.length; p +=(4* gap)){if(pixels[p +3]>0){
        dots.push(newS.Point({
          x: x,
          y: y
        }));
        w = x > w ? x : w;
        h = y > h ? y : h;
        fx = x < fx ? x : fx;
        fy = y < fy ? y : fy;}
      x += gap;if(x >= shapeCanvas.width){
        x =0;
        y += gap;
        p += gap *4* shapeCanvas.width;}}return{ dots: dots, w: w + fx, h: h + fy };}functionsetFontSize(s){
    shapeContext.font ='bold '+ s +'px '+ fontFamily;}functionisNumber(n){return!isNaN(parseFloat(n))&&isFinite(n);}functioninit(){fit();
    window.addEventListener('resize', fit);}// Initinit();return{imageFile:function(url, callback){var image =newImage(),
          a =S.Drawing.getArea();
      image.onload=function(){
        shapeContext.clearRect(0,0, shapeCanvas.width, shapeCanvas.height);
        shapeContext.drawImage(this,0,0, a.h *0.6, a.h *0.6);callback(processCanvas());};
      image.onerror=function(){callback(S.ShapeBuilder.letter('What?'));}
      image.src = url;},circle:function(d){var r = Math.max(0, d)/2;
      shapeContext.clearRect(0,0, shapeCanvas.width, shapeCanvas.height);
      shapeContext.beginPath();
      shapeContext.arc(r * gap, r * gap, r * gap,0,2* Math.PI,false);
      shapeContext.fill();
      shapeContext.closePath();returnprocessCanvas();},letter:function(l){var s =0;setFontSize(fontSize);
      s = Math.min(fontSize,(shapeCanvas.width / shapeContext.measureText(l).width)*0.8* fontSize,(shapeCanvas.height / fontSize)*(isNumber(l)?1:0.45)* fontSize);setFontSize(s);
      shapeContext.clearRect(0,0, shapeCanvas.width, shapeCanvas.height);
      shapeContext.fillText(l, shapeCanvas.width /2, shapeCanvas.height /2);returnprocessCanvas();},rectangle:function(w, h){var dots =[],
          width = gap * w,
          height = gap * h;for(var y =0; y < height; y += gap){for(var x =0; x < width; x += gap){
          dots.push(newS.Point({
            x: x,
            y: y,}));}}return{ dots: dots, w: width, h: height };}};}());S.Shape =(function(){var dots =[],
      width =0,
      height =0,
      cx =0,
      cy =0;functioncompensate(){var a =S.Drawing.getArea();
    cx = a.w /2- width /2;
    cy = a.h /2- height /2;}return{shuffleIdle:function(){var a =S.Drawing.getArea();for(var d =0; d < dots.length; d++){if(!dots[d].s){
          dots[d].move({
            x: Math.random()* a.w,
            y: Math.random()* a.h
          });}}},switchShape:function(n, fast){var size,
          a =S.Drawing.getArea();
      width = n.w;
      height = n.h;compensate();if(n.dots.length > dots.length){
        size = n.dots.length - dots.length;for(var d =1; d <= size; d++){
          dots.push(newS.Dot(a.w /2, a.h /2));}}var d =0,
          i =0;while(n.dots.length >0){
        i = Math.floor(Math.random()* n.dots.length);
        dots[d].e = fast ?0.25:(dots[d].s ?0.14:0.11);if(dots[d].s){
          dots[d].move(newS.Point({
            z: Math.random()*20+10,
            a: Math.random(),
            h:18}));}else{
          dots[d].move(newS.Point({
            z: Math.random()*5+5,
            h: fast ?18:30}));}
        dots[d].s =true;
        dots[d].move(newS.Point({
          x: n.dots[i].x + cx,
          y: n.dots[i].y + cy,
          a:1,
          z:5,
          h:0}));
        n.dots = n.dots.slice(0, i).concat(n.dots.slice(i +1));
        d++;}for(var i = d; i < dots.length; i++){if(dots[i].s){
          dots[i].move(newS.Point({
            z: Math.random()*20+10,
            a: Math.random(),
            h:20}));
          dots[i].s =false;
          dots[i].e =0.04;
          dots[i].move(newS.Point({
            x: Math.random()* a.w,
            y: Math.random()* a.h,
            a:0.3,//.4
            z: Math.random()*4,
            h:0}));}}},render:function(){for(var d =0; d < dots.length; d++){
        dots[d].render();}}}}());S.init();

如果你不希望有ui界面上的文字，要纯的烟花，可以在js文件中将 S.UI.simulate(‘除夕节日快乐’);进行注释。

js烟花效果

还是先看效果，录制的效果不太好，自己可以去尝试，也是非常好看的。
在这里插入图片描述
下面看源码,z这个比较简单，因为没有那么多渲染

<!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"><head><title>超炫网页烟花效果</title></head><style type="text/css">.fire{
        display:block;
        overflow:hidden;
        font-size:12px;
        position:absolute;}
    body{
        overflow:hidden;
        background:#000;}
    html{
        overflow:hidden;
        background:#000;}</style><body></body><script type="text/javascript">varFire=function(r, color){this.radius = r ||12;this.color = color;this.xpos =0;this.ypos =0;this.zpos =0;this.vx =0;this.vy =0;this.vz =0;this.mass =1;this.x =0;this.y=0;this.p = document.createElement("span");this.p.className ="fire";this.p.innerHTML ="*";this.p.style.fontSize =this.radius +"px";this.p.style.color ="#"+this.color;}Fire.prototype ={append:function(parent){
    parent.appendChild(this.p);},setSize:function(scale){this.p.style.fontSize =this.radius * scale +"px";},setPosition:function(x, y){this.p.style.left = x +"px";this.p.style.top =  y +"px";},setVisible:function(b){this.p.style.display = b ?"block":"none";}}varfireworks=function(){var fires =newArray();var count =150;var fl =250;var vpx =500;var vpy =300;var gravity =.5;var floor =200;var bounce =-.8;var timer;var wind =((Math.floor(Math.random()*3)+3)/10)*(Math.random()*2-1>0?1:-1)*.25;var wpos =0;var wcount;return{init:function(){
            wcount =50+ Math.floor(Math.random()*100);for(var i=0; i<count; i++){var color =0xFF0000;
                color =(Math.random()*0xFFFFFF).toString(16).toString().split(".")[0];while(color.length <6){
                color ="0"+ color;}var fire =newFire(12, color);
                fires.push(fire);
                fire.ypos =-100;
                fire.vz = Math.random()*6-3;
                fire.vx =(Math.random()*2-1)*2;
                fire.vy = Math.random()*-15-15;
                fire.x =500
                fire.y =600;
                fire.append(document.body);}var that =this;
            timer =setInterval(function(){
                wpos++;if(wpos >= wcount){
                wpos =0;
                wcount =50+ Math.floor(Math.random()*100);
                wind =((Math.floor(Math.random()*3)+3)/10)*(Math.random()*2-1>0?1:-1)*.25;}for(var i=0;i<count; i++){
                that.move(fires[i]);}},30);},move:function(fire){
            fire.vy += gravity;
            fire.x += fire.vx;
            fire.y += fire.vy;
            fire.vx += wind;
            fire.setPosition(fire.x, fire.y);if(fire.x <0|| fire.x >1000|| fire.y  <0|| fire.y  >600){
                fire.vx =(Math.random()*2-1)*2;
                fire.vy = Math.random()*-15-15;
                fire.x =500;
                fire.y =600;
                fire.setPosition(fire.x, fire.y);}}}}fireworks().init();</script></html>

三用python实现的烟花（可以选择背景）

还是先看效果
在这里插入图片描述
源码如下
main.py

import tkinter as tk
fromPILimport Image, ImageTk
from time import time, sleep
from random import choice, uniform, randint
from particle import Particle
# 颜色选项
colors =['red','blue','yellow','white','green','orange','purple','seagreen','indigo','cornflowerblue']HEIGHT=800WIDTH=1200
def simulate(cv):"""
        循环调用保持不停
    """
    t =time()
    explode_points =[]
    wait_time =randint(10,100)
    numb_explode =randint(5,50)
    # 创建一个所有粒子同时扩大的二维列表
    for point inrange(numb_explode):
        objects =[]
        x_cordi =randint(0.05*WIDTH,0.95*WIDTH)
        y_cordi =randint(0.05*HEIGHT,0.95*HEIGHT)
        speed =uniform(0.2,2.)
        size =uniform(0.2,3)
        color =choice(colors)
        explosion_speed =uniform(0.1,0.5)
        explosion_radius =randint(5,15)
        total_particles =randint(20,50)for i inrange(1, total_particles):
            r =Particle(cv, idx=i, total=total_particles, explosion_speed=explosion_speed, explosion_radius=explosion_radius,
                         x=x_cordi, y=y_cordi, vx=speed, vy=speed, color=color, size=size, lifespan=abs(uniform(0.2,1.75)))
            objects.append(r)
        explode_points.append(objects)
    total_time =.0
    # 1.8s内一直扩大
    while total_time <1.8:sleep(0.01)
        tnew =time()
        t, dt = tnew, tnew - t
        for point in explode_points:for item in point:
                item.update(dt)
        cv.update()
        total_time += dt
    # 循环调用
    root.after(wait_time, simulate, cv)
def close(*ignore):"""退出程序、关闭窗口"""
    global root
    root.quit()if __name__ =='__main__':
    root = tk.Tk()
    cv = tk.Canvas(root, height=HEIGHT, width=WIDTH)
    image = Image.open("D:\\python\\pydoc\\pystudy\\project1\\fireworks-master\\__pycache__\\g.jpg")
    photo = ImageTk.PhotoImage(image)
    cv.create_image(0,0, image=photo, anchor='nw')
    cv.pack()
    root.protocol("WM_DELETE_WINDOW", close)
    root.after(100, simulate, cv)
    root.mainloop()

particle.py

from math import sin, cos, radians
# 模拟重力
GRAVITY=0.1classParticle(object):
    def __init__(self, cv, idx, total, explosion_speed, explosion_radius=1, x=0., y=0., vx=0., vy=0., size=2., color='red', lifespan=2):"""
        粒子在空中随机生成随机，变成一个圈、下坠、消失
        属性:- id: 粒子的id
            - x, y: 粒子的坐标
            - vx, vy: 在坐标的变化速度
            - total: 总数
            - age: 粒子存在的时长
            - color: 颜色
            - cv: 画布
            - lifespan: 最高存在时长
        """
        self.id = idx
        self.x = x
        self.y = y
        self.initial_speed = explosion_speed
        self.explosion_radius = explosion_radius
        self.vx = vx
        self.vy = vy
        self.total = total
        self.age =0
        self.color = color
        self.cv = cv
        self.cid = self.cv.create_oval(
            x - size, y - size, x + size,
            y + size, fill=self.color)
        self.lifespan = lifespan
    def update(self, dt):
        self.age += dt
        # 粒子范围扩大
        if self.alive() and self.expand():
            move_x =cos(radians(self.id *360/ self.total))* self.initial_speed
            move_y =sin(radians(self.id *360/ self.total))* self.initial_speed
            self.cv.move(self.cid, move_x * self.explosion_radius, move_y * self.explosion_radius)
            self.vx = move_x /(float(dt)*1000)
        # 以自由落体坠落
        elif self.alive():
            move_x =cos(radians(self.id *360/ self.total))
            # we technically don't need to update x, y because move will do the job
            self.cv.move(self.cid, self.vx + move_x, self.vy +GRAVITY* dt)
            self.vy +=GRAVITY* dt
        # 移除超过最高时长的粒子
        elif self.cid is not None:
            self.cv.delete(self.cid)
            self.cid = None
    # 扩大的时间
    def expand(self):return self.age <=1.2
    # 粒子是否在最高存在时长内
    def alive(self):return self.age <= self.lifespan

然后自己存放一个放置图片的路径即可

标签： javascript css html

本文转载自: https://blog.csdn.net/jgdabc/article/details/122562085
版权归原作者 兰舟千帆 所有，如有侵权，请联系我们删除。

除夕用不同的语言编写绚丽的烟花

不同语言编写的绚丽烟花

简单Html先来一个简单的形象实现烟花（绝对绚丽）

HTML+Canvas(内含js)

js烟花效果

三用python实现的烟花（可以选择背景）

发表评论

“除夕用不同的语言编写绚丽的烟花”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

除夕用不同的语言编写绚丽的烟花

不同语言编写的绚丽烟花

简单Html先来一个简单的形象实现烟花（绝对绚丽）

HTML+Canvas(内含js)

js烟花效果

三 用python实现的烟花（可以选择背景）

发表评论

“除夕用不同的语言编写绚丽的烟花”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

三用python实现的烟花（可以选择背景）