本例中的粒子就是实实在在的像素，由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. unity音频组件

    unity 支持的四种音频格式: .AIFF  适用于较短的音乐文件可用作游戏打斗音效 .WAV  适用于较短的音乐文件可用作游戏打斗音效 .MP3  适用于较长的音乐文件可用作游戏背景音乐 .OGG ...

  2. JS常用验证方法

    1.验证必须为数字(可有小数点) if(isNaN(value))execCommand('undo') 说明:1.isNaN()方法用于验证value值是否为非法数字,返回值true或者false. ...

  3. Jlink仿真器下载程序时出现Invalid ROM table!

    原因:仿真器时钟设置不对,应该将时间改低一点.

  4. C++类中的静态成员变量与静态成员函数

    最近一直看c++相关的项目,但总是会被c++类中的静态成员变量与静态成员函数的理解感觉很是模糊,不明白为什么类中要是用静态成员变量.于是在网上搜集了一些资料,自己再稍微总结下. 静态成员的概念: 静态 ...

  5. 高级I/O函数(2)-splice函数

    splice函数: 功能描述:用于在两个文件描述符之间移动数据,也是零拷贝操作.函数定义如下: #include <fcntl.h> ssize_t splice(int fd_in,lo ...

  6. Android Support Library package简介

    转自http://my.oschina.net/chengliqun/blog/148451 N久未做android了,以前做的时候,2.2才刚出来,现在android都更新到了4.3了,而从前一段时 ...

  7. MVC过滤器详解和示例

    原文  http://blog.csdn.net/ankeyuan/article/details/29624005 MVC过滤器一共分为四个:ActionFilter(方法过滤器),ResultFi ...

  8. 对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识

    对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识   初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相 ...

  9. asp.net 中如何判断字符串中有几个逗号 (asp也通用)

    如: 字符串 a="1,2,3"; 怎样判断a 中的逗号 有几个 len(a)-len(replace(a,",",""))

  10. mybatis常用操作

    一.增 1.1 单条 <insert id="addUser" parameterType="com.xxx.model.UserInfo" useGen ...