本文介绍如何利用 Canvas 的 getImageData 接口将图片转换为粒子效果。重点解析 imageData 对象中 data 数组的 RGBA 排布规则，以及如何通过行列公式计算像素在画布上的具体坐标位置，为后续动态粒子效果提供数据基础。
首先展示源图与转换后粒子效果的对比：
Canvas 粒子效果实现原理
左侧为原始图片，右侧为生成的粒子效果。该效果基于 Canvas 画布实现，整体逻辑相对简单，核心在于掌握两个关键知识点。
第一步，图片以 Image 对象形式绘制在画布上，随后调用 Canvas 的 getImageData 接口提取图像的像素数据。
var imageData=ctx.getImageData(x, y, width, height);
该接口接收四个参数：x 和 y 指定画布上获取区域的左上角坐标。
width 和 height 指定获取区域的宽度和高度。
接口返回一个 imageData 对象，该对象包含三个主要属性。
imageData={
data:Unit8ClampedArray[10000] //一个包含图片区域内每个像素点的RGBA的整型数据信息
height:200 //读取的图片像素信息区域高度
width:200 //读取的图片像素信息区域宽度
}像素数据解析与坐标计算
第二步，需理解像素数据的内存排布。getImageData 返回的 data 属性是一个 Uint8ClampedArray 类型的一维数组，存储了指定区域内每个像素点的 RGBA 整型值。每个像素由 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 列像素在 data 数组中的起始索引，需使用以下公式计算：
var pos =[( i-1 )*200]+( j-1 )]*4;
公式中 i 代表行数，j 代表列数，200 代表图像的宽度（即每行的像素数）。
以下是相关实现代码：
<!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 粒子效果的基本原理，希望对学习和工作有所助益，感谢支持。