canvas遍历像素

遍历像素

最近，碰到个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);
  }
}