今年的烟花有着落了

自从国家颁布部分区域禁止燃放烟花后,各个城市也陆续颁布了各自的烟花燃放规定。年味似乎也因为缺少了烟花的点缀越来越淡了。但看了下面的内容后,你就可以“放肆”的“燃放烟花”了。站着放、躺着放、室内放、室外放。想怎么放就怎么放。而且还可以给心心念念的人送去燃放祝福,心动不如行动(燃放地址在文章最下面)。

首先让我们看一下送去祝福后的成品:

祝福编辑

编辑页面以星空为背景,在输入框内输入你想要表达的文字,点击开始即可。

<div class="main-box-title">输入祝福语</div>
<div class="inputBox">
    <input class="effect-1" type="text" maxlength="6" placeholder="max 6">
    <span class="focus-border"></span>
</div>

<div class="btn-box">
    <button onclick="getStart()">开始</button>
</div>

烟花燃放

烟火向星辰,所愿皆成真!

每一朵绽放的烟花,都是一个美好的愿望。烟花之所以美丽,是因为陪你看烟花的人更美。

//定义画笔,开始绘画烟花
const windowH = document.body.clientHeight;
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 = windowH;
var bigbooms = [];
window.onload = function(){
    initAnimate()
}
function initAnimate(){
    drawBg();
    lastTime = new Date();
    animate();
}

 

//drawBg方法,绘画背景
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();
    }
}

画月亮。万星丛中你最靓,因为你是月亮。

function drawMoon(){
    var moon = document.getElementById("moon");
    var centerX = canvas.width-100 , centerY = 40 , width = 55;
    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+=1.6; //光晕
      ctx.fill();
      ctx.restore();
    }

}

包装烟火。只有经过包装的烟花才会燃烧出最美的火花,也只有经过包装的烟花,才是最安全的烟火。

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(200, 300)); //gai 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);
      }
    })
   }
}

最后让我们在舒缓的音乐中,尽情的“燃放烟花”吧,尽情的欣赏这最美好的事物。点击烟花开始你最美好的烟花之旅。

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇