本例中的粒子就是实实在在的像素，由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. Android的启动模式

    启动模式简单地说就是Activity启动时的策略,在AndroidManifest.xml中的<Activity>标签的android:launchMode属性设置: 启动模式有4种,分别 ...

  2. Link all references for a local rename (does not change references in other files)

    这是一个十分easy的问题 错误原因  : import  Android.R; 把这句话去掉 ctrl + shift+o  引进一个  项目对应的R文件 R存在于gen文件夹下 可以找到 layo ...

  3. (转) How to install eclipse in ubuntu 12.04

    源地址:http://www.krizna.com/ubuntu/install-eclipse-in-ubuntu-12-04/ Eclipse installation in ubuntu 12. ...

  4. No2_4.接口继承多态_Java学习笔记_经典案例

    import java.lang.reflect.Field; import java.util.ArrayList; import java.util.Collections; import jav ...

  5. 慕课linux学习笔记（二）Xshell与虚拟机的连接

    选择使用的是Xshell5 新建连接 连接成功 修改编码方式,字号,颜色 PS: 连接过程中遇到了很多问题,虚拟机的网络连接我最初选择的是桥连,虚拟机和主机相互之间都能ping通但Xshell就是连接 ...

  6. Hbase写数据，存数据，读数据的详细过程

    Client写入 -> 存入MemStore,一直到MemStore满 -> Flush成一个StoreFile,直至增长到一定阈值 -> 出发Compact合并操作 -> 多 ...

  7. 【JAVA编码专题】深入分析 Java 中的中文编码问题

    http://www.ibm.com/developerworks/cn/java/j-lo-chinesecoding/ 几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么 ...

  8. windows安装Apache HTTP服务器报错：无法启动,因为应用程序的并行配置不正确

    Apache HTTP服务器安装后报:无法启动,因为应用程序的并行配置不正确-(已解决)   0条评论 [摘要:本创做品,出自 “深蓝的blog” 专客,迎接转载,转载时请务必说明出处,不然有权穷究版 ...

  9. 自定义VIew基础

    一.坐标 ①.通过View获取坐标,通过调用getLeft().getRight()...方法获取坐标. 1.获取到的是相对于View父控件的位置 2.指的是左上角和右下角的x,y值 3.View还提 ...

  10. Hough Transform直线检测

    本文原创,如转载请注明出处. Hough Transform 是一种能提取图像中某种特定形状特征的方法,可以将其描述成一种把图像空间中的像素转换成Hough空间中直线或曲线的一种映射函数.通过利用Ho ...