[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt OffscreenCanvas()

[_] [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]

 

 

Konstruktor OffscreenCanvas():

OffscreenCanvas() - konstruktor tworzy nowy OffscreenCanvas obiekt

const offscreen = new OffscreenCanvas(300, 300);
const gl = offscreen.getContext("webgl"); 

Właściwości OffscreenCanvas():

OffscreenCanvas.height - wysokość płótna poza ekranem
OffscreenCanvas.width - szerokość płótna poza ekranem

Metody OffscreenCanvas():

OffscreenCanvas getContext() - zwraca kontekst renderowania dla obszaru roboczego poza ekranem
OffscreenCanvas convertToBlob() - tworzy Blob obiekt reprezentujący obraz zawarty w canvas
OffscreenCanvas transferToImageBitmap() - tworzy ImageBitmap obiekt na podstawie ostatnio wyrenderowanego obrazu

 

Przykłady:

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 300;

 const canvas = document.getElementById("canvas").getContext("bitmaprenderer");
 canvas.width = szer;
 canvas.height = wys; 
 
 const canvasA = document.getElementById("canvasA");
 canvasA.width = szer;
 canvasA.height = wys; 
 const ctxA = canvasA.getContext("2d", { willReadFrequently: true,}); 

 const canvasB = document.getElementById("canvasB");
 canvasB.width = szer;
 canvasB.height = wys; 
 const ctxB = canvasB.getContext("2d", { willReadFrequently: true,}); 

 const canvasC = document.getElementById("canvasC");
 canvasC.width = szer;
 canvasC.height = wys; 
 const ctxC = canvasC.getContext("2d", { willReadFrequently: true,});

 // OffscreenCanvas
 const offscreen = new OffscreenCanvas(szer, wys);
 offscreen.width = 300;
 offscreen.height = 300;
 const ctxoff = offscreen.getContext("2d");

 var counter = 0;
 setInterval( function() {
 zadanieCanvas();
 counter++;
 }, 100);

 function zadanieCanvas() {

 ctxA.clearRect(0, 0, canvasA.width, canvasA.height);
 ctxB.clearRect(0, 0, canvasB.width, canvasB.height);
 ctxC.clearRect(0, 0, canvasB.width, canvasB.height);
 
 const obraz2 = ctxoff.createImageData(100, 100);
 for (let i = 0; i < obraz2.data.length; i += 4) { 
 let x = ((i % 400) / 400) * 255;
 let y = (Math.ceil(i / 400) / 100) * 255;

 obraz2.data[i + 0] = x; // R 
 obraz2.data[i + 1] = y; // G 
 obraz2.data[i + 2] = 255 - x; // B 
 obraz2.data[i + 3] = 255; // A 
 }

 ctxoff.putImageData(obraz2, 0 + counter, 0); 

 const arr = new Uint8ClampedArray(10_000);

 // Wypełnij tablicę wartościami RGBA
 for (let i = 0; i < arr.length; i += 4) {
 arr[i + 0] = 250; // R
 arr[i + 1] = 100; // G
 arr[i + 2] = 0; // B
 arr[i + 3] = 255; // A
 }

 // Zainicjuj nowy obiekt ImageData
 let obraz = new ImageData(arr, 50);
 // Narysuj dane obrazu na canvas
 ctxoff.putImageData(obraz, 0, 0 + counter);

 if (counter == 200)
 { 
 counter = 0;
 }

 const obrazX = offscreen.transferToImageBitmap(); // ImageBitmap

 // Przenieś bieżącą klatkę na widoczne canvas

 ctxA.drawImage(obrazX, 0, 0);
 ctxB.drawImage(obrazX, 0, 0);
 
 canvas.transferFromImageBitmap(obrazX);

 const imageData2 = ctxA.getImageData(0, 0, 300, 300, { colorSpace: "srgb" });
 ctxC.putImageData(imageData2, 0, 0);

 obrazX.close();
 ctxoff.clearRect(0, 0, offscreen.width, offscreen.height);

 }

 return;

 };

</script>

 <canvas id="canvas" width="100" height="100"></canvas>
 <canvas id="canvasA" width="100" height="100"></canvas>
 <canvas id="canvasB" width="100" height="100"></canvas>
 <canvas id="canvasC" width="100" height="100"></canvas>

 

const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker("myWorker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

 

const ekranOFF = document.querySelector("canvas").transferControlToOffscreen();
const worker = new Worker("myWorker.js");
worker.postMessage({ canvas: ekranOFF }, [ekranOFF]);

// 1 myWorker.js
self.onmessage = function(e) {
 if (typeof e.data == "hamulec") {
 // zadanie
 for (let i = 0; i < 2000000000; i++) {}
 } else {
 
 canvasB = e.data.canvas;
 console.log(canvasB); // srgb
 ctxWorker = canvasB.getContext("2d");

 // zadanie
 }
};


// 2 myWorker.js
onmessage = (e) => {
 const canvas = e.data.canvas;
 const gl = canvas.getContext("webgl");
 // zadanie
};

 

// 3 myWorker.js
onmessage = (e) => {

 const canvas = e.data.canvas;
 const gl = canvas.getContext("webgl");

 function zadanie(time) {
 
 // zadanie gl context
 
 requestAnimationFrame(zadanie);
 
 }
 requestAnimationFrame(zadanie);
 
};

 

<script>

 window.onload = () => {

 const ctxA = document.getElementById("canvasA").getContext("bitmaprenderer");
 const ctxB = document.getElementById("canvasB").getContext("bitmaprenderer");

 const offscreen = new OffscreenCanvas(100, 50);
 const gl = offscreen.getContext("webgl");

 // Kontynuuj tylko wtedy, gdy WebGL jest dostępny i działa
 if (gl === null) {
 alert(
 "Nie można zainicjować WebGL. Twoja przeglądarka lub komputer może jej nie obsługiwać.",
 );
 return;
 }

 gl.clearColor(0.14, 0.35, 0.55, 1.0);
 gl.clear(gl.COLOR_BUFFER_BIT);

 const obrazA = offscreen.transferToImageBitmap();
 ctxA.transferFromImageBitmap(obrazA);

 const obrazB = offscreen.transferToImageBitmap();
 ctxB.transferFromImageBitmap(obrazB);
 
 return;

 };

</script>

<canvas id="canvasA"></canvas>
<canvas id="canvasB"></canvas>

 

Opis:
Interfejs OffscreenCanvas zapewnia płótno, które można renderować poza ekranem, oddzielając DOM od API Canvas, dzięki czemu element <canvas> nie jest już całkowicie zależny od DOM. Operacje renderowania można również uruchamiać w kontekście roboczym Worker(), co pozwala na uruchamianie niektórych zadań w oddzielnym wątku i pozwala uniknąć pracy nad głównym wątkiem. OffscreenCanvas jest przedmiotem zbywalnym to obiekty posiadające zasoby, które można przenosić z jednego kontekstu do drugiego, zapewniając, że zasoby będą dostępne tylko w jednym kontekście w danym momencie. Ta funkcja jest dostępna w Worker(). Podczas korzystania z <canvas> elementu lub interfejsu API Canvas renderowanie, animacja i interakcja użytkownika zwykle odbywają się w głównym wątku wykonawczym aplikacji internetowej. Obliczenia związane z animacjami i renderowaniem kanwy mogą mieć znaczący wpływ na wydajność aplikacji.

EventTarget <- OffscreenCanvas

  

Linki:
ImageBitmapRenderingContext() -
ImageBitmapRenderingContext.transferFromImageBitmap() - 
HTMLCanvasElement() transferControlToOffscreen() - przekazuje kontrolę do obiektu OffscreenCanvas
querySelector() - 
requestAnimationFrame() -