首頁 > web前端 > H5教程 > 主體

HTML5邊玩邊學(三)-像素與顏色

黄舟
發布: 2017-03-29 14:48:48
原創
1523 人瀏覽過

一、理解顏色

我們在電腦螢幕上可以看到色彩斑斕的影像,其實這些影像都是由一個個像素點組成的。那麼像素是什麼?顏色又是什麼呢? (如果您提出這兩個問題,您一定是個熱愛思考的人)一個像素其實對應著內存中的一組連續的二進制位,由於是二進制位,每個位上的取值當然只能是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 方法绘制到画布上,就是这么简单。

下面是代码:

简单的图像处理



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test1" width="507" height="348" 
style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 <canvas>标签,
请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>

红色:<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>

绿色:<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>

蓝色:<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>

透明:<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>

<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>
登入後複製

HTML5邊玩邊學(三)-像素與顏色

四、绘制随机颜色的点

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

下面是代码和程序实例:

随机颜色的点



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>

<input type="button" value="画随机点" onclick="interval=setInterval(randomPixel,1);" />

<input type="button" value="停止" onclick="clearInterval(interval);"/>

<input type="button" value="清除" onclick="clearCanvas();"/>

<script type="text/javascript">

    //获取上下文对象

    var canvas = document.getElementById("test2");

    var ctx = canvas.getContext("2d");



    //画布的宽度和长度

    var width = parseInt(canvas.getAttribute("width"));

    var height = parseInt(canvas.getAttribute("height"));



    var imageData = ctx.createImageData(width, height);



    function randomPixel(){

        var x= parseInt(Math.random()*width);

        var y= parseInt(Math.random()*height);

        var index = y * width + x;

        var p = index * 4;



        imageData.data[p + 0] = parseInt(Math.random() * 256);

        imageData.data[p + 1] = parseInt(Math.random() * 256);

        imageData.data[p + 2] = parseInt(Math.random() * 256);

        imageData.data[p + 3] =parseInt(Math.random() * 256);

        ctx.putImageData(imageData,0,0);

    }



    function clearCanvas(){

        ctx.clearRect(0,0,width,height);

        imageData = ctx.createImageData(width, height);

    }

</script>
登入後複製

以上是HTML5邊玩邊學(三)-像素與顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板