遍历像素
最近,碰到个RGBA计算公式不知道咋推出的,后面自己琢磨了一下,明白地差不多了,故记录一下。
canvas中遍历像素有两种算法:1.逐像素遍历 2.行列遍历
逐像素遍历
首先,一个像素格的rgba值是4个数字,所以关键点就是:每隔4个数据遍历一次
for(let i = 0; i < arr.length; i += 4) {
let r = data[i + 0];
let g = data[i + 1];
let b = data[i + 2];
let a = data[i + 3];
console.log(r,g,b,a);
}
行列遍历
这个算法基于行列遍历,可获取像素点的位置信息(哪一行哪一列)

先上代码
for(let y = 0; y < h; y++) {
for(let x = 0; x < w; x++) {
let index = (y * w + x) * 4; -> 疑惑点
let r = data[index];
let g = data[index + 1];
let b = data[index + 2];
let a = data[index + 3];
console.log(r,g,b,a);
}
}
-------------------------------------------------------
此算法多用于实现马赛克效果
上方的图像,根据算法,需要将它向左倒过来看,也就是说y表示行,x表示在哪一列
w,h -> 表示当前像素块的宽和高
// y表示在哪一行
for(let y = 0; y < h; y++) {
// x表示在哪一列
for(let x = 0; x < w; x++) {
// 这公式计算的是r的索引,我们根据r的索引就能很轻松地推出其余数据
// 我的理解是:行乘以像素块的宽度 = 当前像素块在哪一列,再加上列,以此来确定像素块处于哪一行哪一列
// 乘以4是因为有r,g,b,a四个值
let index = (y * w + x) * 4;
let r = data[index];
let g = data[index + 1];
let b = data[index + 2];
let a = data[index + 3];
console.log(r,g,b,a);
}
}