創(chuàng)建馬賽克效果

1、18從零繪制圖像這一節(jié)我們可以開始制作一些真正漂亮的圖像了，例如從創(chuàng)建像素開始制作自己的圖 像。要創(chuàng)建一些像素， 需要調(diào)用 2D 渲染上下文的 createImageData 方法。 通過傳入寬度和高 度，它會返回一個(gè)包含所有常規(guī)屬性的ImageData 對象： width 、height 和（最重要的） data。data 屬性所包含的 CanvasPixelArray 將保存新的像素，此時(shí)它們是不可見的，因?yàn)樗鼈兌急?設(shè)置為透明黑色。在下一個(gè)例子中，我們將創(chuàng)建一個(gè)包含200 200 透明像素區(qū)域的 ImageData 對象，然后將它們?nèi)啃薷某杉t色。var imageData = cont

2、ext.createImageData（200, 200）;var pixels = imageData.data;變量 pixels 僅用作訪問 CanvasPixelArray 中的像素的快捷方式。修改顏色值與查詢顏色值一樣簡單：都是讀寫CanvasPixelArray 中的顏色值。如果想將所有像素修改為紅色，那么需要使用 for 循環(huán)語句遍歷每一個(gè)像素。var numPixels = imageData.width*imageData.height;for （var i = 0; i numPixels; i+） pixelsi*4 = 255; / Redpixelsi*4+1 = 0

3、; / Greenpixelsi*4+2 = 0; / Bluepixelsi*4+3 = 255; / Alpha;變量 numPixels 保存了 ImageData 對象中的像素個(gè)數(shù)，它就是 for 循環(huán)的執(zhí)行次數(shù)。在 每一次循環(huán)過程中， 我們都使用一個(gè)簡單算法給每個(gè)像素賦予顏色值。 每個(gè)像素都有 4 個(gè)顏 色值，所以將像素個(gè)數(shù)乘以 4 就能夠得到該像素的紅色顏色值在 CanvasPixelArray 中的索引 位置。然后，就可以將紅色顏色值設(shè)置為255（全色），綠色和藍(lán)色設(shè)置為 0，而阿爾法值設(shè)置為 255，這樣它就變成不透明的 r。非常簡單！按照目前情況，我們所做的就是創(chuàng)建一個(gè)Ima

4、geData ，然后將像素修改為紅色。現(xiàn)在畫布上還看不見任何效果，因?yàn)槲覀冞€沒有將新像素畫到上面。為此，我們需要調(diào)用2D 渲染上下文的 putImageData 方法。 這個(gè)方法可以接受 3 個(gè)或 7 個(gè)參數(shù)： ImageData 對象、繪制像 素?cái)?shù)據(jù)的原點(diǎn)坐標(biāo)（ x， y）、所謂臟矩形 （dirty rectangle） 的原點(diǎn)坐標(biāo)（ x， y），臟矩形的寬度 和高度。在這個(gè)例子中，你暫時(shí)可以不考慮臟矩形的用途，它的作用只是定義 ImageData 對 象中需要繪制的像素。context.putImageData（imageData, 0, 0）;這樣會在畫布原點(diǎn)繪制新的紅色像素（參見圖1）

5、。1 / 5圖 1 從零開始創(chuàng)建和繪制像素隨機(jī)繪制像素只有紅色像素似乎太單調(diào)，讓我們更進(jìn)一步，繪制一些完全隨機(jī)的顏色。這也很簡單。for (var i = 0; i numPixels; i+) pixelsi*4 = Math.floor(Math.random()*255); / Redpixelsi*4+1 = Math.floor(Math.random()*255); / Greenpixelsi*4+2 = Math.floor(Math.random()*255); / Bluepixelsi*4+3 = 255; / Alpha;通過修改前一個(gè)例子中設(shè)置顏色值的代碼， 我們可以

6、插入 0 至 255 之間的隨機(jī)數(shù)。 我們 仍然保持阿爾法值為 255，否則有一些像素會變成透明的。注意，我們使用了Math.floor 來向下舍入產(chǎn)生的隨機(jī)數(shù)(例如， 150.456 會變成 150)。結(jié)果，我們得到一些雜亂的像素點(diǎn)(參見圖 2)。注意 ：Math.random 可以產(chǎn)生 0 到 1 之間的隨機(jī)小數(shù)將它與另一個(gè)數(shù)字相乘，就可以 得到 0 與該數(shù)字(乘數(shù))之間的隨機(jī)數(shù)。例如， Math.random()*2 55 將得到 0 與 255 之間的 一個(gè)隨機(jī)數(shù)。圖2 隨機(jī)設(shè)置在畫布上繪制的像素的顏色創(chuàng)建馬賽克效果但是， 雜亂的像素并不是畫布的最佳用途。 那么創(chuàng)建一個(gè)馬賽克效果呢？肯

7、定更有意思 一些。 它的實(shí)現(xiàn)方法是， 創(chuàng)建一個(gè)新像素區(qū)域，然后將它分割到一個(gè)柵格中，并為柵格每個(gè) 片段設(shè)置隨機(jī)顏色。 最復(fù)雜的部分是計(jì)算出每個(gè)像素應(yīng)該落到哪個(gè)片段， 這樣相同的片段就 可以設(shè)置相同的顏色。在圖 3 中，我們會看到每個(gè)片段實(shí)際上是由許多像素構(gòu)成的。圖 3 將畫布分割到像素片段柵格中 稍后，我會介紹如何計(jì)算出每個(gè)片段的像素。現(xiàn)在，先來做一些基礎(chǔ)性工作。var imageData = context.createImageData(500, 500);var pixels = imageData.data;/ Number of mosaic tilesvar numTileRows

8、 = 4;var numTileCols = 4;/ Dimensions of each tilevar tileWidth = imageData.width/numTileCols;var tileHeight = imageData.height/numTileRows;前兩行代碼現(xiàn)在你應(yīng)該很熟悉了，它們創(chuàng)建了一個(gè)500 500 像素的 ImageData 對象，然后將 CanvasPixelArray 保存在一個(gè)變量中。后面的代碼是定義兩個(gè)變量，用于聲明像素區(qū) 域劃分的片段數(shù)，其中包括每行每列的馬賽克數(shù)。從現(xiàn)在起，我們將片段稱為塊 (tile) ，因?yàn)?這個(gè)詞更能說明它們的實(shí)際作用。

9、 最后兩行代碼是根據(jù) ImageData 對象的尺寸和各行各列的 塊數(shù)計(jì)算出每個(gè)塊的寬度和高度(以像素為單位) ?，F(xiàn)在，我們有了足夠信息，可以開始遍歷這些塊和修改像素的顏色值。for (var r = 0; r numTileRows; r+) for (var c = 0; c numTileCols; c+) / Set the pixel values for each tilevar red = Math.floor(Math.random()*255);var green = Math.floor(Math.random()*255);var blue = Math.floor(Ma

10、th.random()*255);這是一個(gè)嵌套循環(huán)， 第一個(gè)循環(huán)遍歷每一行的塊， 第二個(gè)循環(huán)遍歷當(dāng)前行的每一列塊 （參 見圖 4左邊的柵格） 。每一個(gè)塊都賦了新的顏色值，這些值都是0至 255 的隨機(jī)數(shù)。到現(xiàn)在為止，所有代碼都是非常基礎(chǔ)的?，F(xiàn)在，在列循環(huán)中顏色值的下方，我們要聲明另外兩個(gè)循環(huán)：for (var tr = 0; tr tileHeight; tr+) for (var tc = 0; tc tileWidth; tc+) ;根據(jù)之前計(jì)算的塊尺寸，這些循環(huán)遍歷的次數(shù)與每個(gè)塊中的像素個(gè)數(shù)相同。變量 tr 和 tc 表示當(dāng)前訪問塊的像素行（基于塊的高度）和像素列（基于塊的寬度） （參見

11、圖 4 右邊的 柵格）。在這個(gè)例子中，每一個(gè)塊的寬和高都是 125 像素，所以 tr 將會循環(huán) 125 次，而在每 一次循環(huán)中， tc 將會再循環(huán) 125 次。圖 4 循環(huán)每一個(gè)塊和塊中每一個(gè)像素然而， 我們現(xiàn)在仍然還無法訪問每一個(gè)塊中的實(shí)際像素。我們現(xiàn)在得到的是所訪問的塊的行和列（變量 r 和 c），以及你在該塊中所處的像素的行和列（變量tr 和 tc）對于它們本身而言，這些變量并不足以用來訪問 CanvasPixelArray 中的像素。為此，需要將它們轉(zhuǎn)換為 以 0 開始的像素位置坐標(biāo)（ x， y），就像是沒有塊存在時(shí)那樣。將下面的代碼添加到第二個(gè)循環(huán)中， 然后我將解釋會出現(xiàn)什么結(jié)果，

12、這事實(shí)上是很簡單 的：var trueX = （c*tileWidth）+tc;var trueY = （r*tileHeight）+tr;這兩個(gè)變量可以計(jì)算出像素的真實(shí)位置。 例如，要計(jì)算 x軸位置， 首先要將當(dāng)前塊的列數(shù)(2)乘以每個(gè)塊的寬度 (125)，這樣就得到所訪問塊的左邊緣的 x 坐標(biāo)位置 (2125=250)。然 后，再加上所訪問的塊中像素的列數(shù) (例如， 10)，這樣就得到?jīng)]有塊時(shí)的 x 軸確切坐標(biāo) (250+ 10= 260)。對 y 軸重復(fù)這個(gè)過程，就可以得到開始修改像素顏色值的位置坐標(biāo)(x，y)。將下面的代碼加到 trueX 和 trueY 的賦值語句后面：var pos = (trueY*(imageData.width*4)+(trueX*4);pixelspos = red;pixelspos+1 = green;pixelspos+2 = blue;pixelspos+3 = 255;這里并沒有出現(xiàn)新代碼， 它只是訪問像素的紅色顏色值， 然后使用之前設(shè)置的顏色值進(jìn) 行賦值。因?yàn)檫@里從 0 開始計(jì)算，所以必須將 tr