[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ OffscreenCanvasRenderingContext2D() ]

OffscreenCanvasRenderingContext2D.commit()

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

commit()

Przykłady: 

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 400;

 const canvas = document.getElementById("canvas2");
 canvas.width = szer;
 canvas.height = wys; 
 
 const ctx = canvas.getContext("2d"); 

 ctx.font = "50px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 
 let tekst = ctx.measureText("Witaj!!!");
 ctx.fillText(tekst.width, 10, 50); 
 
 console.log(tekst.width); // 159.0087890625

 const canvasA = document.getElementById("canvas");
 canvasA.width = szer;
 canvasA.height = wys;
 const offscreen = canvasA.transferControlToOffscreen();
 const worker = new Worker("worker2.js");
 worker.postMessage({ canvasA: offscreen }, [offscreen]);

 const placeholder = document.getElementById("canvas3");
 placeholder.width = szer;
 placeholder.height = wys;
 const offscreen2 = placeholder.transferControlToOffscreen();
 const ctx2 = offscreen2.getContext("2d");

 ctx2.fillStyle = "orange";
 ctx2.fillRect(150, 150, 25, 25);

 ctx2.commit();

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

// Worker() worker2.js
onmessage = (event) => {
 
 const canvas = event.data.canvasA;
 const offCtx = canvas.getContext("2d");

 offCtx.fillStyle = "red";
 offCtx.fillRect(50, 50, 100, 100);
 
};

Opis:
Metoda OffscreenCanvasRenderingContext2D.commit() kopiuje mapę bitową kontekstu renderowania do mapy bitowej <canvas> elementu zastępczego skojarzonego OffscreenCanvas obiektu. Operacja kopiowania jest synchroniczna. Wywołanie tej metody nie jest potrzebne do transferu, ponieważ dzieje się to automatycznie podczas wykonywania pętli zdarzeń.

Zobacz też:
CanvasRenderingContext2D() - Interfejs CanvasRenderingContext2D zapewnia kontekst renderowania 2D dla <canvas>