[canvas]通过动态生成像素点做绚丽效果

pengphie 2016-10-23

展开全文

本例中的粒子就是实实在在的像素，由js代码在canvas上动态生成的像素点！这些像素点通过一个运动方法有规律地动了起来。透过这个思路，我们可以想到很多很炫的效果，但是这个性能有待考察。实验证明，动态控制太多像素点的话绝对会卡的！在做效果方面有经验的朋友，请提出宝贵意见！这个思路走得通么？

<!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">
    /*
     *用面向对象编程方法实现的粒子
     *by @谢帅shawn
     */
    //初始化画布
    var canvas=document.getElementById('Canvas');
    var ctx=canvas.getContext('2d');
    
    /*
     *创建一个圆环类Circle,智能圆环的模型
     */
    var Circle=function(x,y,speeds){
        this.x=x;
        this.y=y;
        this.speed=speeds;
    }
    Circle.prototype={
        //draw方法，画出像素
        draw:function(){    
            
            var n=this.y*imgdata.width+this.x;
            var i=n*4;
            data[i]+=207;
            data[i+1]+=14;
            data[i+2]+=139;
            data[i+3]+=150;
        },
        //move方法，圆环坐标自加速度，并执行draw方法
        move:function(){
            this.x+=this.speed.speedX;
            this.y+=this.speed.speedY;
            this.draw();
        }
    }
    /*
     *创建一个Frame帧类,管理所有circles实例，实现画布的渲染
     */
    var Frame=function(){
        this.circles=[];
        this.sint=null;
    }
    Frame.prototype={
        //star开始定时器，循环调用渲染方法
        star:function () {
            this.lastFrame=(new Date()).getTime();
            this.sint=setInterval((function(progra){
                return function(){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;
            //实时输出帧率
            this.nowFrame=(new Date()).getTime();
            this.ftp=1000/(this.nowFrame-this.lastFrame);
            this.lastFrame=this.nowFrame;
            console.log(this.ftp);
            //调用每个实例circle的运动方法，监听circle坐标实现碰壁反弹效果
            for (i in this.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];可以实现碰壁消失的效果，delete可删除实例
                }
                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
     */
    //创建一个帧实例fra
    var fra=new Frame();
    //创建100个圆环实例circles【i】
    for (var i=0; i<20000; i++) {
        //输入speed属性
        var speed={
            speedX:Math.floor(Math.random()*3),
            speedY:Math.floor(Math.random()*10+4)
        }
        //创建实例
        var circle=new Circle(Math.floor(Math.random()*canvas.width/2),Math.floor(Math.random()*canvas.height/2),speed);
        fra.circles[i]=circle;
    }
    //开始渲染
    fra.star();
</script>
</html>