Apprendre en jouant avec HTML5 (3) - Pixels et Couleurs

1. Comprendre la couleur

Nous pouvons voir des images colorées sur l'écran de l'ordinateur. En fait, ces images sont composées de pixels. Alors, que sont les pixels ? Quelle est la couleur ? (Si vous posez ces deux questions, vous devez être une personne qui aime réfléchir) Un pixel correspond en réalité à un ensemble de bits binaires consécutifs en mémoire puisqu'il s'agit d'un bit binaire, la valeur de chaque bit ne peut bien sûr être que 0 ou. 1 déjà ! De cette manière, cet ensemble de bits binaires consécutifs peut être combiné dans de nombreuses situations par 0 et 1, et chaque combinaison détermine une couleur du pixel. Regardez d'abord l'image ci-dessous

Nous pouvons voir que cette image décrit six pixels, soit un total de 24 petites boîtes carrées.

Remarque : La petite case dans l'image représente un octet , soit 8 bits binaires.

Par conséquent, chaque pixel est constitué de quatre octets . La signification de ces quatre octets est également marquée sur la figure :

Le premier octet détermine la valeur rouge du pixel

Le deuxième octet détermine la valeur verte du pixel

Le troisième octet détermine la valeur de bleu du pixel

Le quatrième octet détermine la valeur de transparence du pixel

La taille de chaque valeur de couleur est de 0 à 255 (Question : Pourquoi peut-il aller seulement à 255 ?), la valeur de transparence : 0 représente complètement transparent, 255 représente complètement opaque

De cette façon, on peut utiliser (255, 0, 0, 255) pour représente un rouge pur pixel

en mémoire, c'est une chaîne de 32 bits comme celle-ci : 11111111 00000000 00000000 11111111

2. Manipuler les pixels

Comprenant l'essence des couleurs et des pixels, nous pouvons effectuer des traitements plus complexes sur les graphiques.

Cependant, HTML5 ne fournit actuellement pas de méthodes pour manipuler directement les pixels comme setPixel ou getPixel, mais nous avons aussi un moyen

qui consiste à utilisez ImageData Object  :

L'objet ImageData est utilisé pour enregistrer les valeurs de pixels de l'image. Il possède trois attributs de largeur, de hauteur et de données, où. l'attribut data est un tableau continu, toutes les valeurs de pixels de l'image sont en fait stockées dans des données.

La méthode d'enregistrement des valeurs de pixels dans l'attribut data est exactement la même que ce que nous avons vu dans la image précédente :

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

Le tableau de données était retiré ci-dessus Quatre valeurs adjacentes consécutives , ces quatre valeurs représentent respectivement le rouge, le vert, le bleu et la taille de la valeur de transparence. Remarque

 : l'index commence à 0, il y a un total de largeur * hauteur * pixels dans l'image, et un total de largeur * hauteur * 4 valeurs sont enregistrées dans le tableau Objet Contexte Context a trois méthodes pour créer, lire et définir des objets ImageData, ce sont

(width , hauteur) : en mémoire Créez un objet ImageData (c'est-à-dire un tableau de pixels) d'une taille spécifiée dans l'objet. Les pixels de l'objet sont tous noirs et transparents, c'est-à-dire rgba(0,0,0,0)

getImageData( x, y, width, height) : renvoie un objet ImageData, qui contient le tableau de pixels de la zone spécifiée

putImageData(data, x, y) : Dessine l'objet ImageData Accédez à la zone désignée de l'écran

3 Un simple

exemple

Tant de choses ont été dites ci-dessus, nous utilisons les connaissances dont nous disposons pour jouer avec les images Programmation, et peut-être qu'un jour nous jouerons à PhotoShop dans Chrome.

Le programme ressemble probablement à ceci : 1. Dessinez une image sur un élément de canevas. Afin de ne pas provoquer d'erreur de sécurité (Security_ERR:DOM EXCEPTION 18), j'utilise l'image d'arrière-plan de la bannière. en haut du blog. Si vous souhaitez exécuter cet exemple, vous devrez peut-être le remplacer par votre propre image 2. Il y a quatre barres de défilement, représentant respectivement les quatre composants de GRBA

3. Faites glisser la diapositive barre pour voir la composante de couleur correspondante augmentera ou diminuera

4. Si l'image devient transparente, l'arrière-plan de l'élément de toile sera affiché. Je définis cet arrière-plan comme mon avatar, 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!