Apprendre HTML5 en jouant (3) Pixels et couleurs _Compétences du didacticiel HTML5

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. Jetez un oeil à l'image ci-dessous

Déclaration : Cet article est un article original et l'auteur se réserve tous droits ! La réimpression est la bienvenue, veuillez indiquer l'auteur Zuo Yu et la source Blog Garden

On peut voir que cette image décrit six pixels et est composée d'un total de 24 petites cases.

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 indiquée dans l'image :

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 bleue 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 ne peut-elle aller qu'à 255 ? La valeur de transparence : 0 représente complètement transparent, 255 représente complètement opaque

).

De cette façon, nous pouvons utiliser (255, 0, 0, 255) pour représenter 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 des moyens

Utilisez simplement l'objet ImageData :

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

L'attribut data stocke les valeurs des pixels exactement de la même manière que nous avons vu dans l'image précédente :

imageData.data[index*4 0]

imageData.data[index*4 1]

imageData.data[index*4 2]

imageData.data[index*4 3]

Ce qui précède supprime les quatre valeurs adjacentes consécutives dans le tableau de données. Ces quatre valeurs représentent respectivement l'index 1 pixel.

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és dans le tableau

Objet Contexte Context a trois méthodes pour créer, lire et définir des objets ImageData, ce sont

createImageData

(width, height) : crée un objet ImageData (c'est-à-dire un tableau de pixels) d'une taille spécifiée en mémoire. 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 Cet objet IamgeData contient le tableau de pixels de la zone spécifiée

. putImageData

(data, x, y) : dessinez l'objet ImageData dans la zone spécifiée de l'écran

3. Un exemple simple de traitement d'image

Cela dit, nous utilisons les connaissances dont nous disposons pour jouer avec la programmation d'images. 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 de fond de bannière en haut de mon blog. Si vous souhaitez exécuter cet exemple, vous devrez peut-être le remplacer par votre propre image

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

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

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

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

下面是代码：

简单的图像处理

复制代码

代码如下:

你的浏览器不支持 <canvas>标签，请使用 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>
提示：您可以先修改部分代码再运行

 

四、绘制随机颜色的点

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

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

复制代码

代码如下:

你的浏览器不支持 <canvas>标签，请使用 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>
提示：您可以先修改部分代码再运行