文档章节

节日烟花

 高雅a
发布于 2016/11/01 17:33
字数 836
阅读 10
收藏 0

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
        body{margin:0;padding:0;overflow: hidden;}
        .city{width:100%;position:fixed;bottom: 0px;z-index: 100;}
        .city img{width: 100%;}
    </style>
 </head>
<body>
    <canvas id="cas" style="background-color: rgba(0,5,24,1)">浏览器不支持canvas</canvas>
    <div class="city"><img src="img/yanhua.png"></div>
    <img src="img/moring.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">HAPPY</div>
        <div class="shape">中秋快乐</div>
    </div>
</body>
</html>
<script type="text/javascript">
    var cas = document.getElementById("cas"),
        ctx = cas.getContext('2d'),
        ocas=document.createElement('canvas'),
        octx=ocas.getContext('2d'),
        cw=document.compatMode=='BackCompat'?document.body.clientWidth:document.documentElement.clientWidth,
        ch=document.compatMode=='BackCompat'?document.body.clientHeight:document.documentElement.clientHeight,
        last,
        now,
        stars=[],
        booms=[],
        moon=document.getElementById('moon'),
        shape=document.querySelectorAll('.shape'),
        audio=document.getElementsByTagName('audio');
    cas.width=ocas.width=cw;
    cas.height=ocas.height=ch;
    window.onload=function(){
        createStars();
        last=+new Date();
        animate();
    }

    function animate(){
        ctx.save();
        ctx.globalCompositeOperation='destination-out';
        ctx.globalAlpha=0.1;
        ctx.fillRect(0,0,cw,ch);
        ctx.restore();

        stars.forEach(function(){
            this.paint();
        });
        createMoon();
        
        now=+new Date();
        if(now-last>1000){
            var rand=getRand(0,100)>50?true:false,num=Math.floor(getRand(0,shape.length)),
                x=getRand(cw/3,cw*2/3),y=ch,r=2,color='#fff',tx=getRand(cw/5,cw*4/5),ty=getRand(50,ch-300);
            if(rand){
                booms.push(new Firework(x,y,r,color,tx,ty));
            }else{
                booms.push(new Firework(x,y,r,color,tx,ty,shape[num]));
            }
            for(var i=0;i<audio.length;i++){
                if(audio[i].src.indexOf('shotfire')>=0 && (audio[i].paused || audio[i].ended)){
                    audio[i].play();
                    break;
                }
            }
            last=now;
        }
        
        booms.forEach(function(){
            var that=this;
            if(!this.dead){
                this.update();
                this.smoke();
            }else{
                this.booms.forEach(function(index){
                    if(!this.dead){
                        this.update();
                    }else{
                        if(index==that.booms.length){
                            booms.splice(booms.indexOf(that),1);
                        }
                    }
                });
            }
        });
        requestAnimationFrame(animate);
    }
    
    function Particle(x,y,r,color,tx,ty){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=color;
        this.tx=tx;
        this.ty=ty;
        this.dead=false;
    }
    Particle.prototype={
        paint:function(){
            ctx.beginPath();
            ctx.fillStyle='rgba('+this.color.a+','+this.color.b+','+this.color.c+',1)';
            ctx.fillRect(this.x-this.r,this.y-this.r,2*this.r,2*this.r);
            ctx.closePath();
        },
        update:function(){
            this.ty+=0.3;
            var dx=this.tx-this.x,dy=this.ty-this.y;
            if(Math.abs(dx)<0.1 && Math.abs(dy)<20){
                this.dead=true;
            }else{
                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;
                this.paint();
            }
        }
    }

    function Firework(x,y,r,color,tx,ty,shape){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=color;
        this.tx=tx;
        this.ty=ty;
        this.shape=shape || false;
        this.dead=false;
        this.ba=getRand(30,50);
        this.booms=[];
    }
    Firework.prototype={
        paint:function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        },
        smoke:function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle='rgba(255,228,150,0.3)';
            ctx.arc(this.x,this.y,this.r+Math.random()*3,0,2*Math.PI);
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        },
        update:function(){
            var dx=this.tx-this.x,dy=this.ty-this.y;
            if(Math.abs(dx)<this.ba && Math.abs(dy)<this.ba){
                this.dead=true;
                if(this.shape){
                    this.shapeBoom();
                }else{
                    this.boom();
                }
                for(var i=0;i<audio.length;i++){
                    if(audio[i].src.indexOf('boom')>=0 && (audio[i].paused || audio[i].ended)){
                        audio[i].play();
                        break;
                    }
                }
            }else{
                this.x+=dx*0.03;
                this.y+=dy*0.03;
                this.paint();
            }
        },
        boom:function(){
            var count=getRand(100,300),r,color,tx,ty,angle,distance;
            for(var i=0;i<count;i++){
                r=getRand(1,3);
                angle=getRand(-Math.PI,Math.PI);
                color={
                    a:parseInt(getRand(0,255)),
                    b:parseInt(getRand(0,255)),
                    c:parseInt(getRand(0,255))
                },
                distance=getRand(0,count);
                tx=Math.cos(angle)*distance+this.x;
                ty=Math.sin(angle)*distance+this.y;
                this.booms.push(new Particle(this.x,this.y,r,color,tx,ty));
            }
        },
        shapeBoom:function(){
            var that=this,step=4,dx=cw/2-this.tx,dy=ch/2-this.ty;
            getData(this.shape,step,function(dots){
                dots.forEach(function(){
                    that.booms.push(new Particle(that.x,that.y,1,this.color,this.x-dx,this.y-dy));
                });
            });
        }
    }
    function getData(dom,step,callback){
        var text=dom.innerHTML,imgData=[],dots=[],i;
        octx.clearRect(0,0,cw,ch);
        octx.save();
        octx.font='120px 微软雅黑 bold';
        octx.textAlign='center';
        octx.textBaseline='middle';
        octx.fillStyle='rgba('+parseInt(getRand(168,255))+','+parseInt(getRand(168,255))+','+parseInt(getRand(168,255))+',1)';
        octx.fillText(text,cw/2,ch/2);
        octx.restore();

        imgData=octx.getImageData(0,0,cw,ch);
        for(var x=0;x<imgData.width;x+=step){
            for(var y=0;y<imgData.height;y+=step){
                i=(y*imgData.width+x)*4;
                if(imgData.data[i+3]>167){
                    dots.push({x:x,y:y,color:{
                        a:imgData.data[i],
                        b:imgData.data[i+1],
                        c:imgData.data[i+2]
                    }});
                }
            }
        }
        callback(dots);
    }

    function createMoon(){
        var sx=cw-200,sy=100,r=40,add=2;
        if(moon.complete){
            ctx.drawImage(moon,sx,sy,2*r,2*r);
        }else{
            moon.onload=function(){
                ctx.drawImage(moon,sx,sy,2*r,2*r);
            }
        }
        
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle='rgba(240,219,120,0.05)';
        for(var i=0;i<5;i++){
            ctx.arc(sx+r,sy+r,r+add,0,2*Math.PI);
            ctx.fill();
            add+=2;
        }
        ctx.closePath();
        ctx.restore();
    }
    function createStars(){
        for(var i=0;i<100;i++){
            stars.push(new Star(getRand(0,cw),getRand(0,ch-200),Math.random(),'#fff'));
        }
    }
    function Star(x,y,r,color){
        this.x=x;
        this.y=y;
        this.r=r;
        this.color=color;
    }
    Star.prototype={
        paint:function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
    }

    function getRand(min,max){
        return Math.random()*(max-min)+min;
    }
    Array.prototype.forEach=function(callback){
        for(var i=0;i<this.length;i++){
            if(this[i]!=null){
                callback.call(this[i],i);
            }
        }
    }
</script>

© 著作权归作者所有

粉丝 1
博文 7
码字总数 1466
作品 0
杭州
程序员
私信 提问
在PPT2007中制作礼花绽放动画效果ppt模板打包下载

  家家户户都有除夕放烟花的习惯,尤其是一些小地方城市,过节礼花那是必不可少的。毕业论文ppt背景放礼花可以增添节日的喜庆气氛,但是大家也需要注意自身安全,下面简单介绍一下礼花绽放...

ppt模板下载空间
2015/09/20
281
0
谷歌发布更新版春运地图

大家好!最近有关谷歌的新闻报道相信各位开发者都很关心。在此先给大家一个简单的更新:目前谷歌中国的各项业务仍旧照常运行。有了新的更新消息我们会通知大家的。感谢大家的理解和支持。 今...

守住每一天
2010/02/02
331
0
Fireworks Star —— 星花怒放

Oh! Do you like fireworks? Have you felt thousands of fireworks burst into bloom at the same time? No? Why not have a try! 【introduction of game】 If you miss the fireworks on......

炎龙王
2016/08/22
97
0
用单反拍烟火——从很挫到还行

作者:周纵苇 微博:@MrGiovanni 邮箱:zongweiz@asu.edu 在各种浪的这个夏天我在学习怎么用单反拍照片,今天的我对于拍烟花特别的有话说! 今天是美国的独立日,七月四号,所以Downtown晚上...

MrGiovanni
2017/07/05
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
2018/07/19
200
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
57分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
59分钟前
8
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
今天
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部