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

Obiekt OffscreenCanvasRenderingContext2D()

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

 

 

Metody OffscreenCanvasRenderingContext2D():

canvasoff commit() - kopiuje mapę bitową kontekstu renderowania do mapy bitowej canvas

Metody i właściwości dziedziczone z CanvasRenderingContext2D():

Cienie CanvasRenderingContext2D():

shadowBlur - Określa efekt rozmycia, domyślnie: 0
shadowColor - Kolor cienia, domyślnie całkowicie przezroczysty czarny
shadowOffsetX - Odległość pozioma, na którą cień zostanie przesunięty, domyślnie: 0
shadowOffsetY - Odległość pionowa, na którą cień zostanie przesunięty, domyślnie: 0

Filtry CanvasRenderingContext2D():

filter - Stosuje filtr CSS lub SVG do płótna, np. w celu zmiany jego jasności lub rozmycia

Gradienty i wzory CanvasRenderingContext2D():

createConicGradient() - Tworzy gradient stożkowy wokół punktu określonego przez współrzędne
createLinearGradient() - Tworzy gradient liniowy wzdłuż linii określonej przez współrzędne
createRadialGradient() - Tworzy gradient promieniowy określony przez współrzędne dwóch okręgów
createPattern() - Tworzy powtarzający wzór obrazu, powtarza w kierunkach określonych. Zwraca CanvasPattern

Komponowanie CanvasRenderingContext2D():

globalAlpha - Wartość alfa stosowana do kształtów i obrazów przed ich nałożeniem na canvas, Domyślny 1.0 nieprzezroczysty
globalCompositeOperation - Zastosowaniu ustawia sposób rysowania kształtów i obrazów na istniejącej mapie bitowej

Manipulacja pikselami CanvasRenderingContext2D():

createImageData() - Tworzy nowy, pusty ImageData obiekt o określonych wymiarach
getImageData() - Zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla obszaru
putImageData() - Maluje dane z ImageData obiektu na płótnie

Rysowanie obrazów CanvasRenderingContext2D():

drawImage() - Rysuje określony obraz

Rysowanie prostokątów CanvasRenderingContext2D():

clearRect() - Ustawia wszystkie piksele w prostokącie na przezroczystą czerń, usuwając całą wcześniej narysowaną zawartość
fillRect() - Rysuje wypełniony prostokąt w pozycji x, y
strokeRect() - Maluje na płótnie prostokąt, punkt początkowy x, y oraz szerokość i wysokość, bieżący styl obrysu

Rysowanie ścieżek CanvasRenderingContext2D():

fill() - Wypełnia bieżące ścieżki podrzędne bieżącym stylem wypełnienia
stroke() - Obrysowuje bieżące ścieżki bieżącym stylem obrysu
clip() - Tworzy ścieżkę przycinającą
isPointInPath() - Raportuje, czy określony punkt znajduje się w bieżącej ścieżce
isPointInStroke() - Raportuje, czy określony punkt znajduje się w obszarze objętym obrysem ścieżki

Stan płótna CanvasRenderingContext2D():

save() - Zapisuje bieżący stan stylu rysunku przy użyciu stosu, można cofnąć wszelkie zmiany restore()
restore() - Przywraca stan stylu rysunku do zapisanego przez save()
canvas - Odwołanie wsteczne tylko do odczytu do pliku HTMLCanvasElement
getContextAttributes() - Zwraca obiekt zawierający atrybuty kontekstu używane przez przeglądarkę
reset() - Resetuje kontekst renderowania, w tym bufor zapasowy, stos stanu rysunku, ścieżkę i style
isContextLost() - Eksperymentalny. Zwraca true, jeśli kontekst renderowania został utracony

Style linii CanvasRenderingContext2D():

lineWidth - Szerokość linii. Domyślne 1.0
lineCap - Rodzaj zakończeń na końcach linii. Możliwe wartości: butt (domyślne), round, square
lineJoin - Określa typ narożników, w których spotykają się dwie linie. Możliwe wartości: round, bevel, miter (domyślne)
miterLimit - Współczynnik graniczny skosu. Domyślne 10
getLineDash() - Zwraca tablicę bieżącego wzoru linii przerywanej zawierającą parzystą liczbę liczb nieujemnych
setLineDash() - Ustawia bieżący wzór przerywanej linii
lineDashOffset - Określa, gdzie rozpocząć tablicę myślników w linii

Style wypełnień i obrysów CanvasRenderingContext2D():

fillStyle - Kolor lub styl wypełnienia do wykorzystania wewnątrz kształtów, domyślny #000 czarny
strokeStyle - Kolor lub styl linii obrysu wokół kształtów, domyślny #000 czarny

Ścieżki, manipulowania ścieżkami obiektów CanvasRenderingContext2D():

beginPath() - Rozpoczyna nową ścieżkę
closePath() - Punkt pióra cofa się na początek bieżącej ścieżki, linię prostą od bieżącego punktu do początku
moveTo() - Rozpoczyna nową podścieżkę w punkcie x, y
lineTo() - dodaje linię prostą do bieżącej ścieżki podrzędnej z określonymi współrzędnymi x, y
bezierCurveTo() - Dodaje sześcienną krzywą Béziera do bieżącej ścieżki
quadraticCurveTo() - Dodaje kwadratową krzywą Béziera do bieżącej ścieżki
arc() - Tworzy łuk kołowy o środku (x, y) i promieniu radius
arcTo() - Dodaje do aktualnej ścieżki łuk o podanych punktach kontrolnych i promieniu
ellipse() - Dodaje łuk eliptyczny do bieżącej ścieżki
rect() - Tworzy ścieżkę dla prostokąta w pozycji x, y, o rozmiarze szerokość i wysokość
roundRect() - Tworzy ścieżkę dla zaokrąglonego prostokąta, promieniach narożników

Tekst CanvasRenderingContext2D():

fillText() - tekst w pozycji x, y, maxWidth
strokeText() - Rysuje kontury tekstu w podanej pozycji x, y, maxWidth
measureText() - Zwraca TextMetrics obiekt, z właściwościami tekstu

Tekst, style tekstu CanvasRenderingContext2D():

font - Ustawienie czcionki. Wartość domyślna 10px sans-serif
textAlign - Ustawienie wyrównania tekstu, wartości: start (domyślne), end, left, right, center
textBaseline - Ustawienie wyrównania linii bazowej, wartości: top, hanging, middle, alphabetic, ideographic, bottom
direction - Kierunkowość, wartości: ltr, rtl, inherit (domyślne)
letterSpacing - Odstępy między literami, domyślnie: 0px
fontKerning - Kerning czcionki, odstępy między literami wartości: auto (domyślne), normal, none
fontStretch - Eksperymentalny. Rozciągnięcie czcionki, wartości: ..., normal (domyślnie)
fontVariantCaps - Eksperymentalny. warianty czcionki, wartości: ..., normal (domyślne)
textRendering - Renderowanie tekstu, wartości: auto, optimizeSpeed, optimizeLegibility, geometricPrecision
wordSpacing - Odstępy między wyrazami. Domyślna wartość: 0px

Transformacje CanvasRenderingContext2D() (czytaj: DOMMatrix):

getTransform() - Pobiera bieżącą macierz transformacji zastosowaną do kontekstu
rotate() - Dodaje obrót do macierzy transformacji. Kąt obrotu w prawo i jest wyrażony w radianach
scale() - Dodaje transformację skalowania do jednostek obszaru roboczego x w poziomie i y w pionie.
translate() - Dodaje transformację, przesuwając płótno x w poziomie i y w pionie
transform() - Mnoży aktualną macierz transformacji przez macierz opisaną przez jej argumenty
setTransform() - Resetuje bieżącą transformację, a następnie wywołuje metodę transform() z argumentami
resetTransform() - Resetuje bieżącą transformację przez macierz tożsamości

Wygładzanie obrazu CanvasRenderingContext2D():

imageSmoothingEnabled - Tryb wygładzania obrazu, jeśli ta opcja jest wyłączona, obrazy nie będą wygładzane w skalowaniu
imageSmoothingQuality - Umożliwia ustawienie jakości wygładzania obrazu

 

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:
Interfejs OffscreenCanvasRenderingContext2D() jest CanvasRenderingContext2D kontekstem renderowania służącym do rysowania na bitmapie obiektu OffscreenCanvas. Jest podobny do CanvasRenderingContext2D obiektu, z następującymi różnicami: nie ma obsługi funkcji interfejsu użytkownika drawFocusIfNeeded i scrollPathIntoView, jego canvas atrybut odnosi się do OffscreenCanvas obiektu, a nie canvas elementu posiada commit() metodę wypychania renderowanych obrazów do elementu OffscreenCanvas zastępczego obiektu kontekstu canvas.

  

Linki: