Element HTML canvas (płótno) służy do rysowania grafiki w locie za pomocą skryptów.
Domyślnie element canvas nie ma obramowania ani treści.
Aby rysować, trzeba znaleźć (uchwycić) element <canvas> (np. poprzez getElementById()) i posłużyć się wbudowanym obiektem z właściwościami i metodami rysowania.
Obiekt ten zwraca nam metoda getContext (). Omówimy tu jej parametr "2d".
<canvas id="rysunek"></canvas>
<script>
var kanwa = document.getElementById("rysunek");
var malarz = kanwa.getContext("2d");
...
</script>
Własności określamy (opisujemy) = "..." a metody (funkcje, działania) wywołujemy ( , , , ) po nazwie obiektu rysującego i kropce. np
malarz.moveTo(0, 0);
malarz.lineTo(200, 100);
malarz.stroke();
malarz.font = "30px Arial";
malarz.fillText("Hej", 10, 50);
| Właściwości | Opis | Składnia, przykłady |
| font | właściwości czcionki (ustawia lub zwraca) | jak w CSS, np. context.font = "30px Arial" |
| textAlign | wyrównanie tekstu (ustawia lub zwraca) | context.textAlign="center|end|left|right|start" |
| textBaseline | linia bazowa tekstu (ustawia lub zwraca) | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom" |
| Metody: | ||
| fillText() | rysuje tekst „wypełniony” | context.fillText(text,x,y,maxWidth) |
| strokeText() | rysuje tekst (bez wypełnienia, kontury) | context.strokeText(text,x,y,maxWidth) |
| measureText() | zwraca obiekt TextMetrics z własnością szerokości tekstu (liczbą pikseli) | context.measureText(text).width; |
| Właściwości: | Opis | Składnia, przykłady |
| strokeStyle | kolor, gradient lub wzór kreski/pędzla rysunku (ustawia lub zwraca) | |
| fillStyle | kolor, gradient lub wzór wypełnienia rysunku (ustawia lub zwraca) | |
| shadowColor | kolor cienia (ustawia lub zwraca) | |
| shadowBlur | poziom rozmycia cienia (ustawia lub zwraca) | |
| shadowOffsetX | poziome przesunięcie cienia (ustawia lub zwraca) | |
| shadowOffsetY | pionowe przesunięcie cienia (ustawia lub zwraca) | |
| globalAlpha | bieżąca wartość alfa lub przezroczystości rysunku (ustawia lub zwraca). Wartość właściwości globalAlpha musi być liczbą z przedziału od 0,0 (pełna przezroczystość) do 1,0 (brak przejrzystości). | context.globalAlpha = liczba |
| Metody: | ||
| createLinearGradient() | tworzy gradient liniowy do użycia w kanwie rysunku | |
| createRadialGradient() | tworzy gradient radialny/kołowy (do użycia w kanwie) | |
| createPattern() | tworzy wzorek poprzez powtarzanie określonego elementu w określonym kierunku) | |
| addColorStop() | określa kolory i pozycje zatrzymania w obiekcie gradientowym | |
| Właściwość | Opis | Składnia, przykłady |
| lineCap | styl zakończenia linii | context.lineCap="butt | round | square" |
| lineJoin | typ utworzonego narożnika, gdy spotykają się dwie linie | context.lineJoin="miter | bevel | round" |
| lineWidth | szerokość linii | context.lineWidth=number |
| miterLimit | maksymalną długość ukosu | context.miterLimit=number |
| Właściwość | Opis | Składnia, przykłady |
| rect() | tworzy prostokąt - do jego narysowania użyj .stroke() lub .fill() | context.rect(x,y,width,height) |
| fillRect() | rysuje „wypełniony” prostokąt | context.fillRect(x,y,width,height) |
| strokeRect() | rysuje prostokąt (bez wypełnienia) | context.strokeRect(x,y,width,height) |
| clearRect() | czyści prostokąt (piksele w nim zawarte) | context.clearRect(x,y,width,height) |
| Metody: | Opis | Składnia, przykłady |
| moveTo() | przenosi ścieżkę do określonego punktu bez tworzenia linii | context.moveTo(x,y) |
| beginPath() | rozpoczyna ścieżkę lub resetuje bieżącą ścieżkę | context.beginPath() |
| closePath() | tworzy ścieżkę wracając od bieżącego do punktu początkowego | context.closePath() |
| stroke() | rysuje zdefiniowaną ścieżkę | context.stroke() |
| fill() | wypełnia bieżący rysunek (ścieżkę). Jeśli ścieżka nie jest zamknięta, metoda ta domknie ścieżkę wracając do punktu początkowego ścieżki | context.fill() |
| lineTo() | Dodaje nowy punkt ścieżki prostą linią od ostatniego punktu | context.lineTo(x,y) |
| clip() | przycina (ogranicza) oryginalne płótno do wykorzystanego obszaru (dowolnego, niekoniecznie prostokątnego). Po przycięciu wszystkie przyszłe rysunki będą ograniczone do przyciętego regionu (współrzędne też będą względem niego). Można zapisać wcześniej bieżący region kanwy za pomocą metody save () i przywrócić ją (oryginał) metodą restore(). | context.clip() |
| arc() | tworzy krzywą okręgu lub jej część (łuk), parametry to współrzędne, promień, początek i koniec w radianach 360o to 2*Math.PI i na końcu opcjonalnie kierunek - domyślny jest przeciwnie do ruchu wskazówek zegara (false), jeśli ma być zgodny to wstawiamy wartość true | context.arc(x,y,r,startAngle,endAngle, counterclockwise) |
| arcTo() | tworzy krzywą/łuk między dwiema stycznymi na płótnie | context.arcTo ( x1, y1, x2, y2, r ) |
| quadraticCurveTo() | tworzy kwadratową krzywą Béziera | context.quadraticCurveTo ( cpx, cpy, x, y ) |
| bezierCurveTo() | tworzy sześcienną krzywą Béziera | context.bezierCurveTo ( cp1x, cp1y, cp2x, cp2y, x, y ) |
| isPointInPath() | zwraca wartość true, jeśli określony punkt znajduje się w bieżącej ścieżce, w przeciwnym razie false | context.isPointInPath ( x, y ) |
| Transformacje - metody | ||
| scale() | Ustawienie skalowania. Od tego momentu wszystko będzie przeskalowywane, łacznie z pozycjonowaniem. 1=100% | context.scale ( scalewidth, scaleheight ) |
| rotate() | Ustawienia obrotu wszystkich przyszłych rysunków (kąt w radianach). W stopniach: stopnie*Math.PI/180 | context.rotate(angle) |
| translate() | Ustawienie przesunięcia (ustawienie nowej pozycji punktu (0,0) | contexttranslate ( x, y ). |
| transform() | Dodanie transformacji - (skalowanie poziome, pochylenie poziome, pochylenie pionowe, skalowanie pionowe, przesunięcie poziome, przesunięcie pionowe). Kolejne tranformacje są względem poprzednich (dodają się). | context. | transform(a,b,c,d,e,f)
| setTransform() | Resetuje bieżącą transformację (macierz obiektu) a następnie uruchamia transform (). Neutralne to (1, 0, 0, 1, 0, 0) lub (0, 1, 1, 0, 0, 0) | context. |
| Właściwość i metody | Opis | Składnia, przykłady |
| drawImage() | Rysuje obraz, wideo lub kanwę rysunku (canvas) na kanwie. Obraz musi zostać wcześniej załadowany. Aby upewnić się, że obraz został załadowany, możesz wywołać funkcję drawImage() z window.onload() lub z document.getElementById ("imageID ").onload. | context. |
| createImageData() | context. | |
| getImageData() | context. | |
| putImageData() | context. | |
| width | context. | |
| height | context. | |
| data | context. | |
| globalCompositeOperation | context. | |
| context. |
| Właściwość i metody | Opis | Składnia, przykłady |
| save() | Zapisuje stan bieżącego kontekstu (matrycę transformacji, region obcinania, listę kresek, strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled | context.save() |
| restore() | Przywraca poprzednio zapisany stan i atrybuty ścieżki metodą .save() | context.restore() |
| createEvent() | context. | |
| getContext() | context. | |
| toDataURL() | context. |