HTML5 Canvas - operacje na pikselach

W tym artykule zajmiemy się zagadnieniem pobierania i modyfikowania pikseli wyświetlanego obrazu.

W tym celu użyjemy metody:

var imageData = context.getImageData(x,y,dx,dy);

UWAGA! Zabezpieczenia przeglądarki wymagają, aby strona z przykładem była pobierana z serwera. Przykład nie będzie więc działał lokalnie.

Po pobraniu obrazka otrzymujemy dostęp do tablicy pikseli:

var tablica = imageData.data;

Pobieramy w ten sposób dane o wszystkich pikselach.

Tablica zawiera nastepujące składowe:

  • tablica[i] - kolor czerwony (R)
  • tablica[i+1]-kolor zielony (G)
  • tablica[i+2] - kolor niebieski (B)
  • tablica[i+3] - kanał alfa (A)

Składowe kolorów są w zakresie od 0 do 255, także dla kanału alfa. Zmienna 'i' oznacza koleny numer piksela, licząc od zera.

Przykład

Stworzymy efekt zaniku obrazka. W tym celu:

  1. utworzymy funkcję, która odczytuje zawartość grafiki i ją modyfikuje (tylko kanał alfa),
  2. zdefiniujemy kontekst płótna i zmienne związane z szybkością animacji oraz poziomem jasności - bright,
  3. utworzymy obiekt typu image, któremu przypiszemy w odpowiednich odstępach czasu wywołanie utworzonej wcześniej funkcji dla zmieniającego się parametru bright.

Zobaczmy to na przykładzie:

<html>
<head>
<script> function focusImage(canvas, context, imageObj, bright){ //odczytujemy parametry obrazka var sw = imageObj.width; var sh = imageObj.height; var sx = canvas.width / 2 - sw / 2; var sy = canvas.height / 2 - sh / 2; var destX = sx; var destY = sy; //odczyt pikseli obrazka var imageData = context.getImageData(sx, sy, sw, sh); var piksele = imageData.data; for (var i = 0; i < piksele.length; i += 4) { var b=piksele[i+3]; //pobranie kanału alfa if(b>bright) {piksele[i+3]=b-bright;}//nadpisanie kanału alfa } document.getElementById("akapit").innerHTML = 'Bright: '+bright; // nadpisujemy grafikę context.putImageData(imageData, destX, destY); } window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var fps=30;
var timeInterval=1000/fps;
var bright = 0;
//tworzymy obrazek
var imageObj = new Image();
imageObj.onload = function(){
var sw = imageObj.width;
var sh = imageObj.height;
var destX = canvas.width/2 - sw/2;
var destY = canvas.height/2 - sh/2;
var intervalId = setInterval(function(){
context.drawImage(imageObj, destX, destY);
if (bright > 255) {clearInterval(intervalId);} else {focusImage(canvas, context, imageObj, bright++);}
}, timeInterval);
};
imageObj.src = "grafika/ikona-biologia.gif"; </script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;"> <p id='akapit'></p>
</canvas>
</body>
</html>
Lupa





© medianauka.pl, 2018-07-11, ART-3569





Polecamy w naszym sklepie

Kolorowe skarpetki Kostka
Kolorowe skarpetki urodzinowe
kolorowe skarpetki góra lodowa
Kolorowe skarpetki Miasto
Matematyka konkretna
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.