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>
上面如果不理解， 对照代码运行一下试试理解吧：
可惜本人数学不好，算法不会。不能为粒子加上炫酷的动态效果~~其实可以找一些算法让粒子动起来的，有兴趣可以做做看~
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
Package.js 现代化的JavaScript项目make工具
Package.js是一个很方便的JavaScript包依赖管理及Make工具。它的设计目标是使浏览器端的JavaScript Component/App 开发更加模块化2012-05-05
JavaScript代码应该放在HTML代码哪个位置比较好？
这篇文章主要介绍了JavaScript代码应该放在HTML代码哪个位置比较好？本文总结了多种放置JS代码的方法,需要的朋友可以参考下2014-10-10
javascript和HTML5利用canvas构建猜牌游戏实现算法
让我猜猜你心中的牌，先随机生成27张牌，不能重复列出三列牌，然后记住其中一张，然后点击牌所在的列，多次就可以猜出你想的牌，具体实现如下，感兴趣的朋友可以参考下哈2013-07-07
本篇文章主要介绍了bootstrap 设置checkbox部分选中效果，主要涉及到js各个方面的内容，对于bootstrap设置checkbox选中效果感兴趣的朋友可以参考一下吧2017-04-04
这篇文章主要介绍了JavaScript实现给按钮加上双重动作的方法,可实现文本框元素值添加及页面跳转的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了如何处理JSON中的特殊字符,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
之前推荐过的移动端web组件库 Vant是Vue.js版本的,其对内承载了有赞所有核心业务,对外有十多万开发者在使用,一直是业界主流的移动端组件库之一,下面这篇文章主要给大家介绍了关于微信小程序Vant组件库的安装与使用的相关资料,需要的朋友可以参考下2022-09-09![[js高手之路]从原型链开始图解继承到组合继承的产生详解](//img.jbzj.com/images/xgimg/bcimg7.png)
下面小编就为大家带来一篇[js高手之路]从原型链开始图解继承到组合继承的产生详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript使用64位浮点数表示数字（基于IEEE 754标准）,这导致某些十进制数字在计算过程中出现精度丢失,所以本文给大家介绍了JavaScript数字精度丢失问题的解决方案,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了ES6 Set结构的应用,结合实例形式分析了ES6 set结构的功能、特点、常见用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
![[js高手之路]从原型链开始图解继承到组合继承的产生详解](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论