Canvas + JavaScript 制作图片粒子效果

更新时间：2017年02月08日 11:07:55 作者：Jeremy阳仔

本文将详细介绍Canvas + JavaScript 制作图片粒子效果的方法。具有很好的参考价值，下面跟着小编一起来看下吧

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

左侧图片为源图，右侧图片为粒子效果图。该效果是在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>

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

javascript中判断json的方法总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的API或工具包，接下来跟着小编学习js中判断json的方法吧
2015-08-08
JavaScript代码里的判断小结
在JavaScript代码中，多多少少会有判断语句。业务越复杂，逻辑就越复杂，判断就越多。今天给大家整理下JavaScript中代码里常会用到的那些判断，有需要的可以参考借鉴。
2016-08-08
uniapp小程序视图容器cover-view使用详解
在日常开发中,使用uniapp开发项目有时会遇到需要覆盖组件的问题,但由于某些组件的渲染优先级过高,例如video,map ,在小程序中只能使用cover-view去覆盖,这篇文章主要给大家介绍了关于uniapp小程序视图容器cover-view使用的相关资料,需要的朋友可以参考下
2022-08-08
深入浅析同源策略和跨域访问
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
2015-11-11
ES6中非常实用的新特性介绍
ECMAScript 6离我们越来越近了，作为它最重要的方言，Javascript也即将迎来语法上的重大变革，InfoQ特开设“深入浅出ES6”专栏，来看一下ES6将给我们带来哪些新内容
2016-03-03
如何基于小程序实现发送语音消息及转文字功能
最近为小程序增加语音识别转文字的功能,坑路不断,特此记录,下面这篇文章主要给大家介绍了关于如何基于小程序实现发送语音消息及转文字功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
html代码调试脚本
html代码调试脚本...
2006-07-07
Dropify.js图片宽高自适应的方法
本篇文章主要介绍了Dropify.js图片宽高自适应的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
javascript代码压缩工具的原理
JavaScript代码压缩对代码进行一系列优化处理,从而减小代码的体积,提高网页的加载速度,JavaScript代码压缩的原理包含去除代码中的空格、注释、不必要的换行符等无用字符,压缩变量名、压缩函数名等操作,将一些常见的操作(如+、-、*、/)转换成更短的操作符(如@、^、#、|)
2023-12-12
详解JS中的this、apply、call、bind(经典面试题)
JS中的this、apply、call、bind是一道经典面试题，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。下面就跟随脚本之家小编一起学习this、apply、call、bind的知识吧
2017-09-09