本例中的粒子就是实实在在的像素，由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. Java关键字transient和volatile

    transient标记的变量,在进行序列化的时候,这个字段不进行序列化操作. volatile标记的变量,在进行读写时,必须强制的与内存同步,即在读的时候需要从内存中读取,写的时候也需要回写到内存中. ...

  2. DataTable转json字符串，jQuery.parseJSON()把json字符串转为标准的json对象格式

    1.string res = DataTableToJson.DataTable2Json(dt);讲DataTable转换为json字符串 http://www.365mini.com/page/j ...

  3. return 与 finally

    (function hello() { try { return console.log('return'); } catch (e) { } finally { console.log('final ...

  4. windows下自动删除n天前的文件

    使用windows2003下的内置命令forfiles配合计划任务可以实现自动删除n天前的文件. windows2003中设定自动执行的计划任务很简单. 一.脚本编写 forfiles命令用法: Fo ...

  5. Gora官方范例

    参考官方文档:http://gora.apache.org/current/tutorial.html 项目代码见:https://code.csdn.net/jediael_lu/mygoradem ...

  6. C/C++与lua实现互调

    1,在lua脚本中调用C/C++代码中的函数 在C++中定义函数时必须以lua_State为参数, 以int为返回值才能被Lua所调用. /* typedef int (*lua_CFunction) ...

  7. debian系统下安装ssh服务

    它是什么?? SSH 为 Secure Shell 的缩写,简单地说,SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用 SSH 协议可 ...

  8. [POJ] 2352 Stars [线段树区间求和]

    Stars Description Astronomers often examine star maps where stars are represented by points on a pla ...

  9. stm32通用定时器中断问题

    在使用stm32的通用定时器定时中断的时候,发现定时器在完成初始化配置后,定时器UIF位会立刻置位,导致在使能中断后,程序会立刻进入定时器中断. 如果设计代码时不希望定时器配置完成后,立刻进入中断,可 ...

  10. 转载：常见EXE文件反编译工具

    PE Explorer V1.99 R5 绿色汉化特别版_强大的可视化汉化集成工具 功能极为强大的可视化汉化集成工具,可直接浏览.修改软件资源,包括菜单.对话框.字符串表等: 另外,还具备有 W32D ...