Lernen Sie beim Spielen mit HTML5 (3) – Pixel und Farben

1. Farbe verstehen

Wir können farbenfrohe Bilder auf dem Computerbildschirm sehen. Tatsächlich bestehen diese Bilder aus Pixeln. Was sind also Pixel? Was ist die Farbe? (Wenn Sie diese beiden Fragen stellen, müssen Sie ein Mensch sein, der gerne denkt.) Ein Pixel entspricht tatsächlich einem Satz aufeinanderfolgender Binärbits im Speicher. Da es sich um ein Binärbit handelt, kann der Wert jedes Bits natürlich nur 0 oder sein 1 schon! Auf diese Weise kann dieser Satz aufeinanderfolgender Binärbits in vielen Situationen durch 0 und 1 kombiniert werden, und jede Kombination bestimmt eine Farbe des Pixels. Schauen Sie sich zuerst das Bild unten an

Wir können sehen, dass dieses Bild sechs Pixel beschreibt, insgesamt 24 kleine Quadratische Kästchen.

Hinweis: Das kleine Kästchen im Bild stellt ein Byte dar, das aus 8 Binärbits besteht.

Daher besteht jedes Pixel aus vier Bytes . Die Bedeutung dieser vier Bytes ist ebenfalls in der Abbildung markiert:

Das erste Byte bestimmt den Rotwert des Pixels

Das zweite Byte bestimmt den Grünwert des Pixels

Das dritte Byte bestimmt den Blauwert des Pixels

Das vierte Byte bestimmt den Transparenzwert des Pixels

Die Größe jedes Farbwerts liegt zwischen 0 und 255 (Frage: Warum kann das nur zu 255 gehen?) Der Wert der Transparenz: 0 steht für völlig transparent, 255 steht für völlig undurchsichtig

Auf diese Weise können wir (255, 0, 0, 255) zur Darstellung verwenden ein rein rotes Pixel

im Speicher, es ist eine 32-Bit-Zeichenfolge wie diese: 11111111 00000000 00000000 11111111

2. Pixel manipulieren

Wenn wir das Wesen von Farben und Pixeln verstehen, können wir komplexere Verarbeitungen an Grafiken durchführen.

Allerdings bietet HTML5 derzeit keine Methoden zur direkten Manipulation von Pixeln wie setPixel oder getPixel, aber wir haben auch eine Möglichkeit

das heißt Verwenden Sie ImageData Objekt :

ImageData-Objekt wird zum Speichern von Bildpixelwerten verwendet. Es verfügt über drei Attribute für Breite, Höhe und Daten Das Datenattribut ist ein kontinuierliches Array . Alle Pixelwerte des Bildes werden tatsächlich in Daten gespeichert.

Die Methode zum Speichern von Pixelwerten im Datenattribut ist genau die gleiche wie im vorherigen Bild:

imageData.data[index*4 +0]
imageData.data[index*4 +1]
imageData.data[index*4 +2]
imageData.data[index*4 +3]

Das Datenarray war oben entnommen Vier aufeinanderfolgende benachbarte Werte , diese vier Werte repräsentieren jeweils die Werte Rot, Grün, Blau und Die Größe des Transparenzwerts. Hinweis

: Index beginnt bei 0, es gibt insgesamt Breite * Höhe Pixel im Bild und insgesamt Breite * Höhe * 4 Werte werden im Array Context-Objekt gespeichert. Der Kontext verfügt über drei Methoden zum Erstellen, Lesen und Festlegen von ImageData-Objekten:

createImageData

(width, height): im Speicher Erstellen Sie ein ImageData-Objekt (d. h. ein Pixelarray) mit einer bestimmten Größe im Objekt. Die Pixel im Objekt sind alle schwarz und transparent, d. h. rgba(0,0,0,0)

getImageData( x, y, width, height): Gibt ein ImageData-Objekt zurück, das das Pixelarray des angegebenen Bereichs

putImageData(data, x, y) enthält ): Zeichnet das ImageData-Objekt. Gehe zum angegebenen Bereich des Bildschirms

3. Ein einfaches

Bildverarbeitungsbeispiel

So viel wurde oben gesagt: Wir nutzen das Wissen, das wir haben, um mit Bildern Programmierung zu spielen, und vielleicht werden wir eines Tages PhotoShop

in Chrome spielen.

Das Programm sieht wahrscheinlich so aus: 1. Um keinen Sicherheitsfehler zu verursachen (Security_ERR:DOM EXCEPTION 18), verwende ich ein Banner-Hintergrundbild oben im Blog. Wenn Sie dieses Beispiel ausführen möchten, müssen Sie es möglicherweise in Ihr eigenes Bild ändern

2. Es gibt vier Schieberegler, die jeweils die vier Komponenten von GRBA darstellen

3. Ziehen Sie die Folie Leiste, um das entsprechende zu sehen Die Farbkomponente wird erhöht oder verringert

4. Wenn das Bild transparent wird, wird der Hintergrund des Leinwandelements angezeigt. Ich habe diesen Hintergrund als meinen Avatar festgelegt, haha.

思路：其实就是用 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>

 

四、绘制随机颜色的点

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

下面是代码和程序实例：

随机颜色的点



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>

Das obige ist der detaillierte Inhalt vonLernen Sie beim Spielen mit HTML5 (3) – Pixel und Farben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!