首先看一下源图和转换成粒子效果的对比图：

     

左侧图片为源图，右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可

1:图片是通过image对象形式绘制在画布上的，然后使用Canvas的getImageData接口，获取图像的像素信息。

var imageData=ctx.getImageData(x, y, width, height);

参数说明：x，y为画布上的x和y坐标

　　　　　width，height为获取指定区域图像的信息

返回值说明：imageData为返回值，它是一个对象，包含三个属性

imageData={

    data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
    height:200   //读取的图片像素信息区域高度
    width:200 　　//读取的图片像素信息区域宽度

}

2:了解像素区域数据的排布说明，以上获取的图片数据像素信息(imageData对象中的data属性)为RGBA整型的一维数组数据。一个像素是有4个值（R,G,B,A）组成的。也就是说，数组信息每四个为一个像素点。因此，有以下规则，

　　第一个像素信息为：RGBA(data[0],data[1],data[2],data[3])

第二个像素信息为：RGBA(data[4],data[5],data[6],data[7])

.....

第N个像素信息为: RGBA(data[(n-1)*4],data[(n-1)*4+1],data[(n-1)*4+2],data[(n-1)*4+3])

.....

　　另外，像素区域既然是一个区域，它是有宽和高的。上面的推算公式适合单独一行使用定位一个像素点。所以计算像素点时要考虑到在整个图像区域内定位：

　　以上图为例。图像的宽和高都为200，如果按照每一个像素为一行一列时。则该图像共有200行，200列。所以要取得 i 行第 j 列的像素初始位置信息为：

　　　　　　var pos =[( i-1 )*200]+( j-1 )]*4;

　　其中，公式中的 i 表示行数，j 表示列数。200为图像的宽度。

demo代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<canvas id="myCanvas" width="600" height="400" style="background:#000">浏览器不支持canvas</canvas>

</body>

<script type="text/javascript">

    var canvas=document.getElementById("myCanvas");

    var ctx=canvas.getContext("2d");

    var image = new Image();

    image.src='/WebWorkspace/EchartDemo/images/star.png';

    var pixels=[];  //存储像素数据

    var imageData;

    image.onload=function(){

        ctx.drawImage(image,200,100,200,200);

        imageData=ctx.getImageData(200,100,200,200);    //获取图表像素信息

        getPixels();    //获取所有像素

        drawPic();  //绘制图像

    };

    function getPixels(){

        var pos=0;

        var data=imageData.data;    //RGBA的一维数组数据

        //源图像的高度和宽度为200px

        for(var i=1;i<=200;i++){

            for(var j=1;j<=200;j++){

                pos=[(i-1)*200+(j-1)]*4; //取得像素位置

                if(data[pos]>=0){

                    var pixel={

                        x:200+j+Math.random()*20, //重新设置每个像素的位置信息

                        y:100+i+Math.random()*20, //重新设置每个像素的位置信息

                        fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'

                    }

                    pixels.push(pixel);

                }

            }

        }

    }

    function drawPic(){

        var canvas=document.getElementById("myCanvas");

        var ctx=canvas.getContext("2d");

        ctx.clearRect(0,0,600,400);

        var len=pixels.length,curr_pixel=null;

        for(var i=0;i<len;i++){

            curr_pixel=pixels[i];

            ctx.fillStyle=curr_pixel.fillStyle;

            ctx.fillRect(curr_pixel.x,curr_pixel.y,1,1);

        }

    }

</script>

</html>

上面如果不理解， 对照代码运行一下试试理解吧：

可惜本人数学不好，算法不会。不能为粒子加上炫酷的动态效果~~其实可以找一些算法让粒子动起来的，有兴趣可以做做看~

以上，谢谢阅读~

　　

Canvas + JavaScript 制作图片粒子效果的更多相关文章

  1. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  2. 如何通过PS制作图片文字效果

    如图这是最终效果,下面我为大家介绍如何制作这种图片文字效果 准备一张图: 方法,步骤: 首先我们打开PHOTOSHOP,插入一张图片. 之后按键盘上面的"T"键快捷键启用文字工具, ...

  3. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  4. 《JavaScript 实战》：JavaScript 实现图片切割效果

    很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果).当时觉得很神奇,碍于水平有限,没做出来.前些日子突然想做一个透镜效果,就突然想到了这 ...

  5. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  6. flash8中利用遮罩制作图片切换效果

    http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html

  7. DeWeb : 制作图片轮换效果

    演示:http://www.web0000.com/slide.dw源代码:http://www.web0000.com/media/source/slide.zip一.新建一个DLL二.除第一行外, ...

  8. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  9. javascript 实现图片拖动

    javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...

随机推荐

  1. RSA----实际函数库选择

    需求:对字符串加密 加密后不要超过这个字符串的长度,最好是1半的长度. 非对称算法. 重复度一定要低 1使用RSA加密 1   rsaeuro 2openssl    参考openssl编程 3 Cr ...

  2. VSC#2010打开视图编辑器假死/卡死

    最近写项目代码的时候写C#,VSC#2010刚配置好,打开之前同学写的项目的设计界面结果...我擦,卡死了,重复几次都是这样. 于是上网搜发现是VS一个bug,打一个VSSP1补丁就好了~ http: ...

  3. 24、手把手教你Extjs5（二十四）模块Form的自定义的设计[3]

    自定义的Form已经可以运行了,下面改一下配置,把Form里面的FieldSet放在Tab之下.修改一下ModuleModel.js中的data下的tf_FormSchemes下的方案,增加一个属性. ...

  4. （一）Javascript基础知识

    一,五种基本数据类型和一种复合数据类型. 五种基本数据类型 1,undefined 2,null 3,string 4,number 5,boolean 6,复合数据类型(Object,Array,D ...

  5. SGU 194 Reactor Cooling ——网络流

    [题目分析] 无源汇上下界可行流. 上下界网络流的问题可以参考这里.↓ http://www.cnblogs.com/kane0526/archive/2013/04/05/3001108.html ...

  6. 10天学会phpWeChat——第十天：phpWeChat的会员注册、登录以及微信网页开发

    通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...

  7. CSS长度单位详解

    序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...

  8. 【转】Linux目录下/dev/shm的理解和使用

    一般来说,现场部署  都要根据内存的大小来设定/dev/shm的大小,大部分使用的是默认的值! Linux目录下/dev/shm的理解和使用 [日期:2014-05-16] 来源:Linux社区  作 ...

  9. JAVA8 HashMap 新特性

    1. 链表解决冲突的方式:   java中处理Hash散列后的冲突使用的是链表法:     java8之前只是使用的简单Entry链表存储键值对.java8后,在Entry队列的长度大于8之后,会自动 ...

  10. [NOI2011]阿狸的打字机（好题！！！！）

    2785: [NOI2011]阿狸的打字机 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 7  Solved: 3[Submit][Status][We ...