基础知识:

  • getImageData(x, y, width, height)——画布中访问像素数据,返回一个2D渲染上下文ImageData对象,它包含3个属性:width、height、data(存储全部像素信息CanvasPixelArray)。
    $$像素栅格\\
    \begin{array}{|c|c|}
    \hline 0 & 4 & 8 \\
    \hline 12 & 16 & 20 \\
    \hline 24 & 28 & 32 \\
    \hline
    \end{array}
    $$$$CanvasPixelArray\\
    \begin{array}{|c|c|}
    \hline 0 &4 &8 &12 &16 &20 &…\\
    \hline
    \end{array}
    $$$$
    \begin{array}{|c|}
    \hline 0 \\
    \hline
    \end{array}=
    \begin{array}{|cccc|}
    \hline 0 &1 &2 &3 \\
    r, &g, &b, &a \\
    \hline
    \end{array}…$$
  • createImageData(width, height)——创建像素数据,返回一个ImageData对象,包含的3个属性同上。
  • putImageData(ImageData, x, y)——绘制像素数据
  • Math.floor(Math.random()*255)——计算随机颜色值。

实现方法:

  • 创建一个新像素区域,获取像素数据
  • 分割马赛克块,计算每个块的像素大小
  • 遍历块
    • 计算随机颜色
    • 遍历每个块的像素
      • 计算以0开始的像素位置坐标(x,y)
      • 结合像素坐标和整个像素区域宽高计算像素的颜色值开始位置
      • 设置像素的4个颜色值
  • 绘制像素

实现步骤:

1、基础性工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var context = document.getElementById('myCanvas').getContext("2d");
var imageData = context.createImageData(400, 400); // 创建像素数据
var pixels = imageData.data; // CanvasPixelArray
// 马赛克块的个数
var numTileRows = 4,
numTileCols = 4;
// 每个块的尺寸
var tileWidth = imageData.width / numTileCols,
tileHeight = imageData.height / numTileRows;
// 遍历……
context.putImageData(imageData, 0, 0); // 绘制像素数据

2、遍历块并修改颜色值,块内遍历像素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
for(var r=0; r<numTileRows; r++) { // 块行4
for(var c=0; c<numTileCols; c++) { // 块列4
// 设置每个块的颜色
var red = Math.floor(Math.random()*255),
green = Math.floor(Math.random()*255),
blue = Math.floor(Math.random()*255);
// 遍历像素
for(var tr=0; tr<tileHeight; tr++) { // 像素行100
for(var tc=0; tc<tileWidth; tc++) { // 像素列100
//
}
}
}
}

现在得到的是所访问的块的行和列(r和c),以及块中所处的像素的行和列(tr和tc),这些变量不足以访问CanvasPixelArray中的像素。

3、计算以0开始的像素位置坐标(x,y)

1
2
3
// 计算像素的真实位置
var trueX = c * tileWidth + tc,
trueY = r * tileHeight + tr;

4、计算像素颜色值索引位置,赋值rgba

1
2
3
4
5
6
// 计算像素红色值索引位置
var pos = ((trueY-1) * (imageData.width * 4)) + ((trueX-1) * 4);
pixels[pos] = red; // r
pixels[pos+1] = green; // g
pixels[pos+2] = blue; // b
pixels[pos+3] = 255; // alpha

最终效果:


参考资料:《Foundation HTML5 Canvas For Games and Entertainment》Chapter 5 Authors: Hawkes, Rob