HTML Canvas 2D

Plansza interaktywna kwiecień 2018

URL:: http://www.plotkarka.eu/Pi/2dcontext/index.html
Autor:: Radosław Kowaluk

Wstęp

Interakcja 1. Układ współrzędnych elementu Canvas

x = y =

Uwaga:

Wartości x i y mogą być ujemne i odpowiednio większe niż width (szerokość) oraz height (wysokość) elementu canvas.

Elementy i atrybuty
Element	Opis
<canvas> </canvas>	Element canvas. Zawartością może być tekst alternatywny. Atrybuty width i height definiują wysokość i szerokość elementu.
<script> </script>	Element script. Zawartością jest kod definiujący zawartość elementu canvas. Wymaga metody getContext("2d") w deklaracji zmiennej.

Umieszczanie elementu canvas na stronie

Uwaga:

Obraz jest w formacie PNG (bez tła).

Stany canvas

Każdy kontekst utrzymuje stos stanów rysowania. Stany rysunku składają się z:

Aktualnej macierzy transformacji.
Aktualnego regionu kadrowania.
Wartości następujących atrybutów:
strokeStyle,
fillStyle,
globalAlpha,
lineWidth,
lineCap,
lineJoin,
miterLimit,
shadowOffsetX,
shadowOffsetY,
shadowBlur,
shadowColor,
globalCompositeOperation,
font,
textAlign,
textBaseline.

Metody zapisu i odczytu stanów canvas
Metoda lub własność	Opis
c.save()	Zapisuje bieżący stan.
c.restore()	Przywraca zapamętany stan.

Stany canvas

Uwagi:

Metoda save() zapisuje zdefiniowany przez właściwość fillStyle kolor. Metoda restore() przywraca zapisane ustawienia formatowania.

Wartość kolor definiujemy zgodnie z Rekomendacją CSS3 Color (zobacz Plansza interaktywna Kolor w CSS3).

Style linii

Metody definiujące style linii
Metoda lub własność	Opis
c.lineWidth [ = value ]	Grubość linii (liczba).
c.lineCap [ = value ]	Typ zakończenia linii. Wartością może być: butt (prosty), round (okrągły), square (kwadratowy).
c.lineJoin [ = value ]	Styl połączenia linii. Wartością może być: bevel (kant), round (okrągły), miter (ukośny).
c.miterLimit [ = value ]	limit stylu miter (liczba)
c.setLineDash(segments)	styl lini (segmenty) definiowany za pomocą tablicy
segments = c.getLineDash()	styl lini (elementy tablicy)
c.lineDashOffset [ = value ]	przesunięcie stylu lini

Interakcja 3. Właściwości lini

lineWidth = lineCap = lineJoin = miterLimit =

setLineDash( [ ] ) segments = lineDashOffset =

Style lini

Style tekstu

Metoda lub własność	Opis
c.font [ = value ]	Właściwości fontu. Minimalnie rozmial i nazwa. Definiujemy jak reguła font CSS w atrybucie style (Plansza interaktywna Fonty w CSS).
c.textAlign [ = value ]	Wyrównanie tekstu w poziomie. Wartościami są: start (początek), end (koniec), lef (do lewej), right (do prawej), center (do środka).
c.textBaseline [ = value ]	Wyrównanie tekstu w pionie. Wartościami są: top (do góry), hanging (do góry), middle (do środka), alphabetic (linia pisma alfabetycznego), ideographic (linia pisma ideograficznego), bottom (do dołu)

Interakcja 4. Właściwości tekstu

font = textAlign = textBaseline =

Metoda pomocnicza: fillText( , , )

Style tekstu

Budowanie ścieżki

Metoda lub własność	Opis
c.moveTo(x, y)	do punktu (x, y)
c.closePath()	zamknięcie ścieżki
c.lineTo(x, y)	linia do (x, y)
c.quadraticCurveTo(cpx, cpy, x, y)	krzywa kwadratowa
c.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	krzywa Béziera
c.arcTo(x1, y1, x2, y2, radius)	łuk
c.arc(x, y, radius, startAngle, endAngle [, counterclockwise ] )	łuk
c.rect(x, y, w, h)	prostokąt

Budowanie ścieżki

Przekształcenia

Metoda lub własność	Opis
c.scale(x, y)	skalowanie (poziomo, pionowo)
c.rotate(angle)	obrót (kąt w radianach)
c.translate(x, y)	translacja, przesunięcie
c.transform(a, b, c, d, e, f)	Macierz transformacji
c.setTransform(a, b, c, d, e, f)	Macierz transformacji

Przekształcenia

Źródła obrazu

Ten typ łącza umożliwia stosowanie obiektów wykorzystujących dowolny z poniższych interfejsów jako źródeł obrazów:

HTMLImageElement( img elementy)
HTMLVideoElement( video elementy)
HTMLCanvasElement( canvas elementy)

Źródła obrazu

Wypełnienia i obramowania

Metoda lub własność	Opis
c.fillStyle [ = value ]	styl wypełnienia
c.strokeStyle [ = value ]	styl linii
gradient.addColorStop(offset, color)	dodaje kolor do gradientu
gradient = c.createLinearGradient(x0, y0, x1, y1)	tworzy gradient liniowy
gradient = c.createRadialGradient(x0, y0, r0, x1, y1, r1)	tworzy gradient radialny
pattern = c.createPattern(image, repetition)	tworzy wzorzec

Style wypełnienia i obramowania

Rysowanie prostokątów

Metoda lub własność	Opis
c.clearRect(x, y, w, h)	przezroczysty prostokąt (*)
c.fillRect(x, y, w, h)	wypełniony prostokąt (*)
c.strokeRect(x, y, w, h)	obramowanie prostokąta (*)
* x, y, w, h - liczby określające odpowiednio pozycję x, y oraz rozmiar w,h

Rysowanie prostokątów

Rysowanie tekstu

Metoda lub własność	Opis
c.fillText(text, x, y [, maxWidth ] )	Tekst text w (x, y). Opcjonalnie maksymalna szerokość maxWidth.
c.strokeText(text, x, y [, maxWidth ] )	Obrys tekstu text w (x, y). Opcjonalnie maksymalna szerokość maxWidth.
metrics = c.measureText(text)	Pomiar tekstu text.
metrics.width	Długość tekstu metrics

Interakcja 10. Rysowanie tekstu

fillText( , , [, ] )
metrics.width =

Metoda pomocnicza: font =

Rysowanie tekstu

Ścieżka domyślna

Metoda lub własność	Opis
c.beginPath()	początek ścieżki
c.fill()	wypełnienie ścieżki
c.stroke()	obrys ścieżki
c.drawFocusIfNeeded(element)	bd
c.clip()	katrowanie
c.isPointInPath(x,y)	zwraca true jeśli punkt (x,y) należy do ścieżki

ścieżka domyślna

Rysowanie obrazów

Metoda lub własność	Opis
c.drawImage(image, dx, dy)	rysuje obraz*
c.drawImage(image, dx, dy, dw, dh)	rysuje skalowany obraz*
c.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)	rysuje kadr obrazu*
* image (obraz); dx, dy (położenie); dw, dh (rozmiar); sx, sy, sw, sh (pozycja kadru)

Rysowanie obrazów

Regiony

Metoda lub własność	Opis
c.addHitRegion(options)	bd
c.removeHitRegion(id)	bd
c.clearHitRegions()	bd

Regiony

Manipulacja pikselami

Metoda lub własność	Opis
imagedata = c.createImageData(sw, sh)	tworzy obiekt ImageData
imagedata = c.createImageData(imagedata)	zwraca obiekt ImageData
imagedata = c.getImageData(sx, sy, sw, sh)	wycinek canvasu
imagedata.width	szerokość obiektu ImageData
imagedata.height	wysokość obiektu ImageData
imagedata.data	tablica RGBa pikseli
c.putImageData(imagedata, dx, dy)	rysuje pixele z imagedata

Manipulacja pikselami

Kompozycja

Metoda lub własność	Opis
c.globalAlpha [ = value ]	Przezroczystość
c.globalCompositeOperation [ = value ]	Kompozycja*
* source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor, vendorName-operationName

Kompozycja

Cienie

Metoda lub własność	Opis
c.shadowColor [ = value ]	kolor cienia (kolor)
c.shadowOffsetX [ = value ]	przesunięcie poziome (liczba)
c.shadowOffsetY [ = value ]	przesunięcie pionowe (liczba)
c.shadowBlur [ = value ]	rozmycie cienia (liczba)

Cienie

Model rysowania

Animacja z wykorzystaniem rekurencji

Uwagi:

Metoda setTimeout() wywołuje funkcje podaną jako pierwszy argument. Drugi argument oznacza liczbę milisekund opóźnienia.

Najlepsze praktyki

Animacja

Przykłady

Przykład z rekomendacji W3C

<canvas width="400" height="100"></canvas>
<script>
 var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 var lastX = context.canvas.width * Math.random();
 var lastY = context.canvas.height * Math.random();
 var hue = 0;
 function line() {
   context.save();
   context.translate(context.canvas.width/2, context.canvas.height/2);
   context.scale(0.9, 0.9);
   context.translate(-context.canvas.width/2, -context.canvas.height/2);
   context.beginPath();
   context.lineWidth = 5 + Math.random() * 10;
   context.moveTo(lastX, lastY);
   lastX = context.canvas.width * Math.random();
   lastY = context.canvas.height * Math.random();
   context.bezierCurveTo(context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         context.canvas.width * Math.random(),
                         context.canvas.height * Math.random(),
                         lastX, lastY);
   hue = hue + 10 * Math.random();
   context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
   context.shadowColor = 'white';
   context.shadowBlur = 10;
   context.stroke();
   context.restore();
 }
 setInterval(line, 50);
 function blank() {
   context.fillStyle = 'rgba(0,0,0,0.1)';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 }
 setInterval(blank, 40);
</script>

Przykład z rekomendacji W3C

<!DOCTYPE HTML>
<html>
 <head>
  <title>Edge detection demo</title>
  <script>
   var image = new Image();
   function init() {
     image.onload = demo;
     image.src = "logo.w3c.png";
   }
   function demo() {
     var canvas = document.getElementsByTagName('canvas')[0];
     var context = canvas.getContext('2d');
     context.drawImage(image, 0, 0);
     var input = context.getImageData(0, 0, canvas.width, canvas.height);
     var output = context.createImageData(canvas.width, canvas.height);
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;
     for (var y = 1; y < h - 1; y += 1) {
       for (var x = 1; x < w - 1; x += 1) {
         for (var c = 0; c < 3; c += 1) {
           var i = (y*w + x)*4 + c;
           outputData[i] = 127 + -inputData[i - w*4 - 4] -   inputData[i - w*4] - inputData[i - w*4 + 4] +
                                 -inputData[i - 4]       + 8*inputData[i]       - inputData[i + 4] +
                                 -inputData[i + w*4 - 4] -   inputData[i + w*4] - inputData[i + w*4 + 4];
         }
         outputData[(y*w + x)*4 + 3] = 255; // alpha
       }
     }
     context.putImageData(output, 0, 0);
   }
  </script>
 </head>
 <body onload="init()">
  <canvas></canvas>
 </body>
</html>

Wstęp

Interakcja 1. Układ współrzędnych elementu Canvas

Umieszczanie elementu canvas na stronie Testuj

Stany canvas

Stany canvas Testuj

Style linii

Interakcja 3. Właściwości lini

Style lini Testuj

Style tekstu

Interakcja 4. Właściwości tekstu

Style tekstu Testuj

Budowanie ścieżki

Budowanie ścieżki Testuj

Przekształcenia

Przekształcenia Testuj

Źródła obrazu

Źródła obrazu Testuj

Wypełnienia i obramowania

Style wypełnienia i obramowania Testuj

Rysowanie prostokątów

Rysowanie prostokątów Testuj

Rysowanie tekstu

Interakcja 10. Rysowanie tekstu

Rysowanie tekstu Testuj

Ścieżka domyślna

ścieżka domyślna Testuj

Rysowanie obrazów

Rysowanie obrazów Testuj

Regiony

Regiony Testuj

Manipulacja pikselami

Manipulacja pikselami Testuj

Kompozycja

Kompozycja Testuj

Cienie

Cienie Testuj

Model rysowania

Animacja z wykorzystaniem rekurencjiTestuj

Najlepsze praktyki

Animacja Testuj

Przykłady

Przykład z rekomendacji W3C Testuj

Przykład z rekomendacji W3C Testuj

Umieszczanie elementu canvas na stronie

Stany canvas

Style lini

Style tekstu

Budowanie ścieżki

Przekształcenia

Źródła obrazu

Style wypełnienia i obramowania

Rysowanie prostokątów

Rysowanie tekstu

ścieżka domyślna

Rysowanie obrazów

Regiony

Manipulacja pikselami

Kompozycja

Cienie

Animacja z wykorzystaniem rekurencji

Animacja

Przykład z rekomendacji W3C

Przykład z rekomendacji W3C