本例中的粒子就是实实在在的像素，由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>

[canvas]通过动态生成像素点做绚丽效果的更多相关文章

  1. 利用jQuery中live为动态生成Dom添加datepicker效果

    利用Live属性,focus时重新绑定控件 $(".datepickerDom").live("focus", function () { $(this).da ...

  2. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...

  3. js动态生成input指定My97DatePicker时间问题

    js生成的input指定onclick时间: 以下1.2为错误: onclick="WdatePicker()"; onclick=WdatePicker(); 若指定到windo ...

  4. 神奇的canvas——点与线绘制的绚丽动画效果

    代码地址如下:http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效果 ...

  5. 动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

  6. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  7. 动态生成的DOM做点击事件无效

    有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <b ...

  8. js动态生成canvas

    最近看代码发现一个小现象,就是用js动态生成的canvas在浏览器审查元素的时候,发现它没有结束标签,但是不会影响canvas上图形的绘制,同时还有一点就是在动态设置canvas宽度和高度的时候,不要 ...

  9. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

随机推荐

  1. JS 图片预览功能

    <script type="text/javascript">    function DisplayImage(fileTag) {        document. ...

  2. Winform 无边框随意拖动【转载】

    本篇技术内容转载自:http://www.cnblogs.com/ap0606122/archive/2012/10/23/2734964.html using System; using Syste ...

  3. poj3264 线段树

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 44121   Accepted: 20715 ...

  4. NYOJ 110 剑客决斗

    110剑客决斗 在路易十三和红衣主教黎塞留当权的时代,发生了一场决斗.n个人站成一个圈,依次抽签.抽中的人和他右边的人决斗,负者出圈.这场决斗的最终结果关键取决于决斗的顺序.现书籍任意两决斗中谁能胜出 ...

  5. w530 在ubuntu 12.04 _x64 背光调节方法

    So to get the screen brightness keys working with your Nvidia graphics card, create a file in the xo ...

  6. HDU 3001 状压DP

    有道状压题用了搜索被队友骂还能不能好好训练了,, hdu 3001 经典的状压dp 大概题意..有n个城市 m个道路  成了一个有向图.n<=10: 然后这个人想去旅行.有个超人开始可以把他扔到 ...

  7. [Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  8. js 日常问题记录

    1.解决ie6下css背景图不缓存 try{ document.execCommand('BackgroundImageCache',false,true); }catch(e){} 2.为ajax设 ...

  9. find之exec和args

    本来以为以前的差不多够用了.呵呵,看到很多高手用高技巧,心痒痒的觉得我自己还可以提升啊..哈哈哈. 这个实践起来之后,,SED,AWK也得深化一下,,,SHELL和PYTHON,作运维的两样都不能废. ...

  10. AT89C 系列单片机解密原理

    单片机解密简单就是擦除单片机片内的加密锁定位.由于AT89C系列单片机擦除操作时序设计上的不合理.使在擦除片内程序之前首先擦除加密锁定位成为可能.AT89C系列单片机擦除操作的时序为:擦除开始---- ...