HTML5 wprowadza rewolucję oferując rysowanie 3D w przeglądarkach. Jednak dysponuje też grafiką 2D, która jest chyba łatwiejsza do opanowania
HTML5 wprowadza rewolucję oferując rysowanie 3D w przeglądarkach. Jednak dysponuje też grafiką 2D, która jest chyba łatwiejsza do opanowania
Chcąc użyć tego pakietu musimy przede wszystkim zrobić w HTML-u miejsce, gdzie będą pojawiały się rysunki. W sekcji "body" wstawiamy więc:
<canvas name="canvas" width="800" height="600"></canvas>
Wszystkie parametry są opcjonalne. Rysowaniem sterujemy programem w Javascript. W tej sekcji HTML umieszczamy więc jako pierwszy do wykonania kod:
var context = canvas . getContext('2d');
Powoduje on uruchomienie mechanizmu rysowania 2D i połączenie zmiennej context z polem canvas.
Zestaw procedur rysowania przypomina grafikę żółwiową znaną najpierw z logo i bibliotek wielu innych języków programowania oraz API Windows. I tak:
•context .
moveTo(x, y) Tworzy punkt rozpoczynający ścieżkę.
•context .
lineTo(x, y) Łączy aktualną ścieżkę z kolejną linią prostą.
Krzywe Bézier’a są znane każdemu użytkownikowi pakietu Corel Draw. Krzywe definiuje się tam jako punkty początkowy i końcowy oraz dwa kontrolne pozwalające dowolnie kształtować krzywe. Ich odpowiednikami są dwie funkcje:
•context .
quadraticCurveTo(cpx, cpy, x, y) Połączenie kwadratową funkcją Bézier’a.
•context .
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) Połączenie kubiczną funkcją Bézier.
Z kolei poniższy zestaw procedur pozwala włączać łuki w krzywe:
•context .
arcTo(x1, y1, x2, y2, radiusX [, radiusY, rotation ]) Łączenie łuku ze ścieżką.
•context .
arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) Tworzenie łuku.
A następujące rysują znane figury:
•context .
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise] ) Tworzenie łuku elipsy.
•context .
rect(x, y, w, h) Tworzy prostokąt.
Z kolei poniższe operacje pozwalają tworzyć i manipulować ścieżkami czyli połączeniem linii i krzywych:
•path = new
Path() Tworzy nową pustą ścieżkę.
•path = new
Path(path) Tworzy nową kopię zadanej ścieżki.
•path .
addPath(path, transform) Dodaje do ścieżki ścieżkę daną jako argument.
•path .
addText(text, styles, transform, x, y [, maxWidth ])
•path .
addPathByStrokingText(text, styles, transform, x, y [, maxWidth ]) Dodaje do ścieżki serię ścieżek w zadanych koordynatach.
•context .
closePath() Zamyka aktualną ścieżkę.
Gdy mamy gotowy obrazek w pliku możemy ggo umieścić na canvas odpowiednio przeskalowując i przycinając:
•context .
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Na przykład następująca funkcja:
function rysuj() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Zewnętrzny okrąg
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Twarz (zgodnie ze wskazówkami zegara)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Lewe oko
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Prawe oko
ctx.stroke();
}
Wyrysuje schematyczną twarz(brązowe linie oznaczają przenoszenie pióra i będą niewidoczne):
