[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.createImageData()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

createImageData(width, height)
createImageData(width, height, settings)
createImageData(imagedata)

Przykłady:

const imageData = ctx.createImageData(250, 100);
console.log(imageData);
// imageData { width: 250, height: 100, data: Uint8ClampedArray[100000] }

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 const imageData = ctx.createImageData(250, 100);

 for (let i = 0; i < imageData.data.length; i += 4) {

 imageData.data[i + 0] = 250; // R value
 imageData.data[i + 1] = 10; // G value
 imageData.data[i + 2] = 10; // B value
 imageData.data[i + 3] = 255; // A value
 }

 ctx.putImageData(imageData, 50, 50);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Metoda CanvasRenderingContext2D.createImageData() tworzy nowy, pusty ImageDataobiekt o określonych wymiarach. Wszystkie piksele w nowym obiekcie są przezroczyste i czarne. Parametry width - szerokość nadawana nowemu ImageData obiektowi, wartość ujemna odwraca prostokąt wokół osi pionowej, height - wysokość, która ma zostać nadana nowemu ImageData obiektowi, wartość ujemna odwraca prostokąt wokół osi poziomej, settings - opcjonalny, obiekt o następujących właściwościach: colorSpace - określa przestrzeń kolorów danych obrazu, można ustawić "srgb" na przestrzeń kolorów sRGB lub przestrzeń kolorów "display-p3" wyświetlacza DCI-P3, imagedata - istniejący ImageData obiekt, z którego można skopiować szerokość i wysokość, sam obraz nie jest kopiowany. Wartość zwracana nowy ImageData obiekt o określonej szerokości i wysokości. Nowy obiekt jest wypełniony przezroczystymi czarnymi pikselami. Zgłaszane wyjątki:  IndexSizeError DOMException, jeśli którykolwiek z argumentów width lub height ma wartość zero. Każdy piksel w ImageData obiekcie składa się z czterech wartości tablicowych.

Zobacz też:
ImageData() - 
ImageData.data - 
putImageData()-