注冊|登錄

聯(lián)系電話:024-31891684  13390130939
沈陽軟件公司--沈陽軟件定制

沈陽軟件開發(fā)_沈陽軟件公司_沈陽軟件定制/軟件/最新技術(shù)

Latest technology最新技術(shù)

canvas通過動(dòng)態(tài)生成像素點(diǎn)做絢麗效果

瀏覽量:3315

本例中的粒子就是實(shí)實(shí)在在的像素,由js代碼在canvas上動(dòng)態(tài)生成的像素點(diǎn)!這些像素點(diǎn)通過一個(gè)運(yùn)動(dòng)方法有規(guī)律地動(dòng)了起來。

<!doctype html>

<html>

<head>

    <title>智能粒子</title>

    <meta charset='utf-8' />

    <style type="text/css">

        body{background-color:black;}

        #Canvas{margin:50px auto;display:block;border:1px red solid;}

    </style>

</head>

 

<body>

    <canvas width='300' height='300' id='Canvas'>您的瀏覽器不支持canvas</canvas>

</body>

<script type="text/javascript">

    /*

     *用面向?qū)ο缶幊谭椒▽?shí)現(xiàn)的粒子

     *by @謝帥shawn

     */

    //初始化畫布

    varcanvas=document.getElementById('Canvas');

    varctx=canvas.getContext('2d');

   

    /*

     *創(chuàng)建一個(gè)圓環(huán)類Circle,智能圓環(huán)的模型

     */

    varCircle=function(x,y,speeds){

        this.x=x;

        this.y=y;

        this.speed=speeds;

    }

    Circle.prototype={

        //draw方法,畫出像素

        draw:function(){   

           

            varn=this.y*imgdata.width+this.x;

            vari=n*4;

            data[i]+=207;

            data[i+1]+=14;

            data[i+2]+=139;

            data[i+3]+=150;

        },

        //move方法,圓環(huán)坐標(biāo)自加速度,并執(zhí)行draw方法

        move:function(){

            this.x+=this.speed.speedX;

            this.y+=this.speed.speedY;

            this.draw();

        }

    }

    /*

     *創(chuàng)建一個(gè)Frame幀類,管理所有circles實(shí)例,實(shí)現(xiàn)畫布的渲染

     */

    varFrame=function(){

        this.circles=[];

        this.sint=null;

    }

    Frame.prototype={

        //star開始定時(shí)器,循環(huán)調(diào)用渲染方法

        star:function() {

            this.lastFrame=(newDate()).getTime();

            this.sint=setInterval((function(progra){

                returnfunction(){progra.render();}

            })(this),30);   

        },

        //render渲染方法

        render:function() {

            //清除上一幀

            ctx.clearRect(0,0,canvas.width,canvas.height);

            imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);

            data=imgdata.data;

            //實(shí)時(shí)輸出幀率

            this.nowFrame=(newDate()).getTime();

            this.ftp=1000/(this.nowFrame-this.lastFrame);

            this.lastFrame=this.nowFrame;

            console.log(this.ftp);

            //調(diào)用每個(gè)實(shí)例circle的運(yùn)動(dòng)方法,監(jiān)聽circle坐標(biāo)實(shí)現(xiàn)碰壁反彈效果

            for(i inthis.circles) {

                this.circles[i].move();

                if(this.circles[i].x>canvas.width ||this.circles[i].x<0){

                    this.circles[i].speed.speedX=-this.circles[i].speed.speedX;

                    //delete this.circles[i];可以實(shí)現(xiàn)碰壁消失的效果,delete可刪除實(shí)例

                }

                if(this.circles[i].y>canvas.height||this.circles[i].y<0)

                    this.circles[i].speed.speedY=-this.circles[i].speed.speedY;

 

            }

            ctx.putImageData(imgdata,0,0);

        }   

    }

    /*

     *Main

     */

    //創(chuàng)建一個(gè)幀實(shí)例fra

    varfra=newFrame();

    //創(chuàng)建100個(gè)圓環(huán)實(shí)例circles【i】

    for(vari=0; i<20000; i++) {

        //輸入speed屬性

        varspeed={

            speedX:Math.floor(Math.random()*3),

            speedY:Math.floor(Math.random()*10+4)

        }

        //創(chuàng)建實(shí)例

        varcircle=newCircle(Math.floor(Math.random()*canvas.width/2),Math.floor(Math.random()*canvas.height/2),speed);

        fra.circles[i]=circle;

    }

    //開始渲染

    fra.star();

</script>

</html>

沈陽團(tuán)購網(wǎng)|營口網(wǎng)站制作|沈陽軟件公司|軟件定制|網(wǎng)站建設(shè)|加盟易勢|提交問題

主站蜘蛛池模板: 精品久久久久成人码免费动漫| 97av麻豆蜜桃一区二区| 日韩欧美亚洲综合久久| 亚洲欧美综合国产精品一区| 精品天海翼一区二区| 国产做国产爱免费视频| www日本xxx| 国产视频福利一区| segui久久综合精品| 成年女人毛片免费播放视频m| 五月天国产视频| 欧美最猛黑人xxxx黑人猛交黄| 免费A级毛片无码A| 精品视频中文字幕| 国产久视频观看| 黑人玩弄漂亮少妇高潮大叫| 国产精品乳摇在线播放| 99久久国产综合精品2020| 女大学生沙龙室3| 三级演员苏畅简历及个人资料简介 | 69精品人人人人| 在线观看福利网站| www.四虎com| 快猫官方网站是多少| 中文字幕永久免费| 日本xxxx高清在线观看免费| 久久精品国产久精国产一老狼 | 老子影院午夜伦不卡| 国产人妖视频一区二区| 国产色在线|亚洲| 国产真实乱对白精彩久久| 1区2区3区产品乱码免费| 国产超碰人人模人人爽人人喊 | 扒开美妇白臀扒挺进在线视频| 久久国产精品一国产精品| 最刺激黄a大片免费观看下截 | 亚州日本乱码一区二区三区| 欧美国产成人精品一区二区三区| 亚洲欧美另类精品久久久| 永久黄网站色视频免费| 亚洲色成人www永久网站|