从零绘制图像参考模板范本.doc

1、18从零绘制图像这一节我们可以开始制作一些真正漂亮的图像了，例如从创建像素开始制作自己的图像。要创建一些像素，需要调用2D渲染上下文的createImageData方法。通过传入宽度和高度，它会返回一个包含所有常规属性的ImageData对象：width、height和（最重要的）data。data属性所包含的CanvasPixelArray将保存新的像素，此时它们是不可见的，因为它们都被设置为透明黑色。在下一个例子中，我们将创建一个包含200200透明像素区域的ImageData对象，然后将它们全部修改成红色。var imageData = context.createImageData(2

2、00, 200); var pixels = imageData.data; 变量pixels仅用作访问CanvasPixelArray中的像素的快捷方式。修改颜色值与查询颜色值一样简单：都是读写CanvasPixelArray中的颜色值。如果想将所有像素修改为红色，那么需要使用for循环语句遍历每一个像素。var numPixels = imageData.width*imageData.height; for (var i = 0; i numPixels; i+) pixelsi*4 = 255; / Red pixelsi*4+1 = 0; / Green pixelsi*4+2 =

3、0; / Blue pixelsi*4+3 = 255; / Alpha ; 变量numPixels保存了ImageData对象中的像素个数，它就是for循环的执行次数。在每一次循环过程中，我们都使用一个简单算法给每个像素赋予颜色值。每个像素都有4个颜色值，所以将像素个数乘以4就能够得到该像素的红色颜色值在CanvasPixelArray中的索引位置。然后，就可以将红色颜色值设置为255（全色），绿色和蓝色设置为0，而阿尔法值设置为255，这样它就变成不透明的r。非常简单！按照目前情况，我们所做的就是创建一个ImageData，然后将像素修改为红色。现在画布上还看不见任何效果，因为我们还没有将

4、新像素画到上面。为此，我们需要调用2D渲染上下文的putImageData方法。这个方法可以接受3个或7个参数：ImageData对象、绘制像素数据的原点坐标（x，y）、所谓脏矩形(dirty rectangle)的原点坐标（x，y），脏矩形的宽度和高度。在这个例子中，你暂时可以不考虑脏矩形的用途，它的作用只是定义ImageData对象中需要绘制的像素。context.putImageData(imageData, 0, 0); 这样会在画布原点绘制新的红色像素（参见图1）。图1 从零开始创建和绘制像素随机绘制像素只有红色像素似乎太单调，让我们更进一步，绘制一些完全随机的颜色。这也很简单。fo

5、r (var i = 0; i numPixels; i+) pixelsi*4 = Math.floor(Math.random()*255); / Red pixelsi*4+1 = Math.floor(Math.random()*255); / Green pixelsi*4+2 = Math.floor(Math.random()*255); / Blue pixelsi*4+3 = 255; / Alpha ; 通过修改前一个例子中设置颜色值的代码，我们可以插入0至255之间的随机数。我们仍然保持阿尔法值为255，否则有一些像素会变成透明的。注意，我们使用了Math.floor来向

6、下舍入产生的随机数（例如，150.456会变成150）。结果，我们得到一些杂乱的像素点（参见图2）。注意：Math.random可以产生0到1之间的随机小数将它与另一个数字相乘，就可以得到0与该数字（乘数）之间的随机数。例如，Math.random()*2 55将得到0与255之间的一个随机数。图2 随机设置在画布上绘制的像素的颜色创建马赛克效果但是，杂乱的像素并不是画布的最佳用途。那么创建一个马赛克效果呢？肯定更有意思一些。它的实现方法是，创建一个新像素区域，然后将它分割到一个栅格中，并为栅格每个片段设置随机颜色。最复杂的部分是计算出每个像素应该落到哪个片段，这样相同的片段就可以设置相同的颜

7、色。在图3中，我们会看到每个片段实际上是由许多像素构成的。图3 将画布分割到像素片段栅格中稍后，我会介绍如何计算出每个片段的像素。现在，先来做一些基础性工作。var imageData = context.createImageData(500, 500); var pixels = imageData.data; / Number of mosaic tiles var numTileRows = 4; var numTileCols = 4; / Dimensions of each tile var tileWidth = imageData.width/numTileCols; var

8、 tileHeight = imageData.height/numTileRows; 前两行代码现在你应该很熟悉了，它们创建了一个500500像素的ImageData对象，然后将CanvasPixelArray保存在一个变量中。后面的代码是定义两个变量，用于声明像素区域划分的片段数，其中包括每行每列的马赛克数。从现在起，我们将片段称为块(tile)，因为这个词更能说明它们的实际作用。最后两行代码是根据ImageData对象的尺寸和各行各列的块数计算出每个块的宽度和高度（以像素为单位）。现在，我们有了足够信息，可以开始遍历这些块和修改像素的颜色值。for (var r = 0; r numTi

9、leRows; r+) for (var c = 0; c numTileCols; c+) / Set the pixel values for each tile var red = Math.floor(Math.random()*255); var green = Math.floor(Math.random()*255); var blue = Math.floor(Math.random()*255); ; ; 这是一个嵌套循环，第一个循环遍历每一行的块，第二个循环遍历当前行的每一列块（参见图4左边的栅格）。每一个块都赋了新的颜色值，这些值都是0至255的随机数。到现在为止，所有代

10、码都是非常基础的。现在，在列循环中颜色值的下方，我们要声明另外两个循环：for (var tr = 0; tr tileHeight; tr+) for (var tc = 0; tc tileWidth; tc+) ; ; 根据之前计算的块尺寸，这些循环遍历的次数与每个块中的像素个数相同。变量tr和tc表示当前访问块的像素行（基于块的高度）和像素列（基于块的宽度）（参见图4右边的栅格）。在这个例子中，每一个块的宽和高都是125像素，所以tr将会循环125次，而在每一次循环中，tc将会再循环125次。图4 循环每一个块和块中每一个像素然而，我们现在仍然还无法访问每一个块中的实际像素。我们现在得

11、到的是所访问的块的行和列（变量r和c），以及你在该块中所处的像素的行和列（变量tr和tc）对于它们本身而言，这些变量并不足以用来访问CanvasPixelArray中的像素。为此，需要将它们转换为以0开始的像素位置坐标（x，y），就像是没有块存在时那样。将下面的代码添加到第二个循环中，然后我将解释会出现什么结果，这事实上是很简单的：var trueX = (c*tileWidth)+tc; var trueY = (r*tileHeight)+tr; 这两个变量可以计算出像素的真实位置。例如，要计算x轴位置，首先要将当前块的列数(2)乘以每个块的宽度(125)，这样就得到所访问块的左边缘的x坐

12、标位置(2125=250)。然后，再加上所访问的块中像素的列数（例如，10），这样就得到没有块时的x轴确切坐标(250+ 10= 260)。对y轴重复这个过程，就可以得到开始修改像素颜色值的位置坐标（x，y）。将下面的代码加到trueX和trueY的赋值语句后面：var pos = (trueY*(imageData.width*4)+(trueX*4); pixelspos = red; pixelspos+1 = green; pixelspos+2 = blue; pixelspos+3 = 255;这里并没有出现新代码，它只是访问像素的红色颜色值，然后使用之前设置的颜色值进行赋值。因为这里从0开始计算，所以必须将trueX和trueY减1。最后一步是将像素绘制到画布上，所以要将下面的putImageData调用放到4个循环之外：context.putImageData(imageData, 0, 0);如果一切正常，画布上就会出现生动的马赛克效果（参见图5）。图5完成的马赛克效果通过修改每行和每列的块数，还能创建出更有趣的效果（参见图6）。图6修改块的个数，创建出不同的马赛克效果 5 / 5