HTML5邊玩邊學（3）像素與顏色 _html5教學技巧

一、理解顏色

我們在電腦螢幕上可以看到色彩斑斕的影像，其實這些影像都是由一個個像素點組成的。那麼像素是什麼？顏色又是什麼呢？ （如果您提出這兩個問題，您一定是個熱愛思考的人）一個像素其實對應著內存中的一組連續的二進制位，由於是二進制位，每個位上的取值當然只能是0 或者1 了！這樣，這組連續的二進位就可以由 0 ，1 排列組合出很多種情況，而每一種排列組合就決定了這個像素的一種顏色。先看看下面這張圖

聲明：為本文為原創文章，作者保留所有權利！歡迎轉載，轉載請註明作者左洸和出處博客園

 

我們可以看到這張圖描述了六個像素點，總共由24個小方框組成。

注意：圖中的一個小方框代表一個位元組，即8個二進位​​位元。

因此，每個像素點由四個位元組組成。圖中也分別標示了這四個位元組所代表的含義：

第一個位元組決定像素的紅色值

第二個位元組決定像素的綠色值

第三個位元組決定像素的藍色值

第四個位元組決定像素的透明度值

每一種分顏色值的大小是從 0 到 255（提問：為什麼只能到255？） ，透明度的取值：0 代表完全透明，255代表完全不透明

這樣，我們就可以用（255，0，0，255）來表示一個純紅色像素

在記憶體中，他是這樣的一個32位元的字串： 11111111 00000000 00000000 11111111

 

二、操作像素

了解了顏色和像素的實質，我們就可以對圖形進行更複雜的處理。

可是，HTML5 目前還沒有提供類似 setPixel 或 getPixel 這樣直接操作像素點的方法， 但是我們也有辦法

就是使用 ImageData 物件：

ImageData物件用來保存圖像像素值，它有 width、height和 data 三個屬性，其中 data 屬性就是一個連續數組，圖像的所有像素值其實是保存在 data 裡面的。

data 屬性保存像素值的方法和我們在前面圖片中看到的一模一樣：

imageData.data[index*4 0]

imageData.data[index*4 1]

imageData.data[index*4 2]

imageData.data[index*4 3]

上面取出了data 數組中連續相鄰的四個值，這四個值分別代表了圖像中第index 1 個像素的紅色、綠色、藍色和透明度值的大小。

注意：index 從0 開始，影像中總共有width * height 個像素，陣列中總共保存了width * height * 4 個數值

 

上下文對象 Context 有三個方法可以建立、讀取和設定 ImageData 對象，他們分別是

createImageData(width, height)：在記憶體中建立指定大小的ImageData 物件（即像素陣列），物件中的像素點都是黑色透明的，即rgba(0,0, 0,0)

getImageData(x, y, width, height)：傳回一個 ImageData 對象，這個 IamgeData 物件中包含了指定區域的像素陣列

putImageData(data, x, y)：將 ImageData 物件繪製到螢幕的指定區域上

 

三、一個簡單的影像處理範例

上面說了這麼多，我們用了解的知識來玩玩圖像編程，或許有一天我們就要在 Chrome 中玩 PhotoShop 了。

程式大概是這個樣子的：

1、將一幅圖片繪製到一個 canvas 元素上，為了不引發安全錯誤(Security_ERR:DOM EXCEPTION 18)，我用的是我博客頂部的橫幅背景圖片。你要執行這個例子，可能需要改成自己的圖片

2、有四个滑动条，分别代表 GRBA 四个分量

3、拖动滑动条，图像中对应的颜色分量就会增加或者减少

4、如果图像变成透明，就会显示 canvas 元素的背景，我把这个背景设置成了我的头像，呵呵。

思路：其实就是用 getImageData 方法，将你想改变的那一块区域的像素数组取出来，然后根据你拖动的滑动条和滑动条的数值，来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上，就是这么简单。

下面是代码：

简单的图像处理

复制代码

代码如下:

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
红色：
绿色：
蓝色：
透明：

演示效果:

<p><canvas style="background-image: url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)" id="test1" height="230" width="295">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p>红色：<input onchange="colorChange(event,0)" type="range" max="100" min="1"> </p> <p>绿色：<input onchange="colorChange(event,1)" type="range" max="100" min="1"> </p> <p>蓝色：<input onchange="colorChange(event,2)" type="range" max="100" min="1"> </p> <p>透明：<input onchange="colorChange(event,3)" type="range" max="100" min="1"> <script type="text/javascript"> //获取上下文对象 var canvas = document.getElementById("test1"); var ctx = canvas.getContext("2d"); //画布的宽度和长度 var width = parseInt(canvas.getAttribute("width")); var height = parseInt(canvas.getAttribute("height")); //装入图像 var image = new Image(); image.onload =imageLoaded; image.src = "/skins/Valentine/images/banner2.gif"; //用来保存像素数组的变量 var imageData=null; function imageLoaded() { // 将图片画到画布上 ctx.drawImage(image, 0, 0); //为了提高速度，只获取图像中一部分区域的像素数组 imageData = ctx.getImageData(0, 0, width, height); } function colorChange(event,offset){ imageLoaded(); for (var y = 0; y < imageData.height; y++) { for (x = 0;x < imageData.width; x++) { //index 为当前要处理的像素编号 var index = y * imageData.width + x; //一个像素占四个字节，即 p 为当前指针的位置 var p = index * 4; //改变当前像素 offset 颜色分量的数值，offset 取值为0-3 var color = imageData.data[p + offset] * event.target.value / 50; // 颜色值限定在[0..255] color = Math.min(255, color); //将改变后的颜色值存回数组 imageData.data[p + offset]=color } } //输出到屏幕 ctx.putImageData(imageData, 0, 0); } </script></p>
提示：您可以先修改部分代码再运行

 

四、绘制随机颜色的点

这个例子是在画布上随机选择一个点，然后再给他一个随机的颜色值，其实用到的方法和上面的例子大同小异，就是需求不同罢了。

下面是代码和程序实例：
随机颜色的点

复制代码

代码如下:

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

演示效果:

<p><canvas style="background-color: black" id="test2" height="300" width="300">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> </p> <p><input onclick="interval=setInterval(randomPixel,1);" value="画随机点" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> <input onclick="clearCanvas();" value="清除" type="button"> <script type="text/javascript"> //获取上下文对象 var canvas2 = document.getElementById("test2"); var ctx2 = canvas2.getContext("2d"); //画布的宽度和长度 var width2 = parseInt(canvas2.getAttribute("width")); var height2 = parseInt(canvas2.getAttribute("height")); var imageData2 = ctx2.createImageData(width2, height2); function randomPixel(){ var x= parseInt(Math.random()*width2); var y= parseInt(Math.random()*height2); var index = y * imageData2.width + x; var p = index * 4; imageData2.data[p + 0] = parseInt(Math.random() * 256); imageData2.data[p + 1] = parseInt(Math.random() * 256); imageData2.data[p + 2] = parseInt(Math.random() * 256); imageData2.data[p + 3] =parseInt(Math.random() * 256); ctx2.putImageData(imageData2,0,0); } function clearCanvas(){ ctx2.clearRect(0,0,width2,height2); imageData2 = ctx2.createImageData(width2, height2); } </script></p>
提示：您可以先修改部分代码再运行