Heim Web-Frontend H5-Tutorial HTML5-Lernen beim Spielen (3) Pixel und Farben _HTML5-Tutorial-Fähigkeiten

HTML5-Lernen beim Spielen (3) Pixel und Farben _HTML5-Tutorial-Fähigkeiten

May 16, 2016 pm 03:51 PM
像素 颜色

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 das Bild unten an

Erklärung: Dieser Artikel ist ein Originalartikel und der Autor behält sich alle Rechte vor! Ein Nachdruck ist willkommen, bitte geben Sie den Autor Zuo Yu und die Quelle Blog Garden

Wir sehen, dass dieses Bild sechs Pixel beschreibt und aus insgesamt 24 kleinen Kästchen besteht.

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 auch im Bild 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 reicht von 0 bis 255 (Frage: Warum kann er nur bis 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) verwenden, um ein rein rotes Pixel darzustellen

Im Speicher ist es 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

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

Verwenden Sie einfach das ImageData-Objekt:

ImageData-Objekt wird zum Speichern von Bildpixelwerten verwendet. Es verfügt über drei Attribute: Breite, Höhe und Daten. Das Datenattribut ist ein kontinuierliches Array Daten.

Das Datenattribut speichert Pixelwerte auf genau die gleiche Weise, wie wir es im vorherigen Bild gesehen haben:

imageData.data[index*4 0]

imageData.data[index*4 1]

imageData.data[index*4 2]

imageData.data[index*4 3]

Das Obige nimmt die vier aufeinanderfolgenden benachbarten Werte

im Datenarray heraus. Diese vier Werte repräsentieren jeweils den Index 1 Pixel. Hinweis

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

createImageData

(width, height): Erstellt ein ImageData-Objekt (d. h. ein Pixelarray) einer bestimmten Größe im Speicher. 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. Dieses IamgeData-Objekt enthält das Pixelarray des angegebenen Bereichs

putImageData(data, x, y): Zeichnen Sie das ImageData-Objekt in den angegebenen Bereich des Bildschirms

3. Ein einfaches Bildverarbeitungsbeispiel

Nachdem wir so viel gesagt haben, nutzen wir das Wissen, das wir haben, um mit der Bildprogrammierung zu spielen. 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 das Banner-Hintergrundbild oben in meinem Blog. Wenn Sie dieses Beispiel ausführen möchten, müssen Sie es möglicherweise in Ihr eigenes Bild ändern

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

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

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

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

下面是代码:

简单的图像处理

复制代码
代码如下:

<canvas id="test1" width="507" height="348" style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 &lt;canvas&gt;标签,请使用 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>

演示效果:



提示:您可以先修改部分代码再运行
 

四、绘制随机颜色的点

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

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

复制代码
代码如下:

<canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 &lt;canvas&gt;标签,请使用 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>

演示效果:



提示:您可以先修改部分代码再运行
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie ändere ich die Farbe der Titelleiste unter Windows 11? Wie ändere ich die Farbe der Titelleiste unter Windows 11? Sep 14, 2023 pm 03:33 PM

Wie ändere ich die Farbe der Titelleiste unter Windows 11?

So invertieren Sie Farben unter Windows 11 [Verwenden von Verknüpfungen] So invertieren Sie Farben unter Windows 11 [Verwenden von Verknüpfungen] Apr 14, 2023 pm 02:43 PM

So invertieren Sie Farben unter Windows 11 [Verwenden von Verknüpfungen]

Wie viele Megapixel sind 8k? Wie viele Megapixel sind 8k? Mar 30, 2023 pm 06:21 PM

Wie viele Megapixel sind 8k?

Natürliches Titan: Enthüllung der wahren Farbe des iPhone 15 Pro Natürliches Titan: Enthüllung der wahren Farbe des iPhone 15 Pro Sep 18, 2023 pm 02:13 PM

Natürliches Titan: Enthüllung der wahren Farbe des iPhone 15 Pro

Ausführliches Tutorial zum Einstellen der Augenschutz-Farbanwendung auf einem Win10-Computer Ausführliches Tutorial zum Einstellen der Augenschutz-Farbanwendung auf einem Win10-Computer Jul 08, 2023 am 10:46 AM

Ausführliches Tutorial zum Einstellen der Augenschutz-Farbanwendung auf einem Win10-Computer

So erstellen Sie Pixelkunst in GIMP So erstellen Sie Pixelkunst in GIMP Feb 19, 2024 pm 03:24 PM

So erstellen Sie Pixelkunst in GIMP

So ändern Sie die Pixel auf dem Meitu Xiuxiu. So ändern Sie die Pixel auf dem Meitu Xiuxiu So ändern Sie die Pixel auf dem Meitu Xiuxiu. So ändern Sie die Pixel auf dem Meitu Xiuxiu Mar 12, 2024 pm 02:50 PM

So ändern Sie die Pixel auf dem Meitu Xiuxiu. So ändern Sie die Pixel auf dem Meitu Xiuxiu

So stellen Sie die Pixelhöhe von Meitu Xiuxiu ein So stellen Sie die Pixelhöhe von Meitu Xiuxiu ein Mar 27, 2024 am 11:00 AM

So stellen Sie die Pixelhöhe von Meitu Xiuxiu ein

See all articles