Login lub e-mail Hasło   

Rysowanie w HTML5 w wersji 2D

HTML5 wprowadza rewolucję oferując rysowanie 3D w przeglądarkach. Jednak dysponuje też grafiką 2D, która jest chyba łatwiejsza do opanowania
Wyświetlenia: 1.260 Zamieszczono 06/10/2013

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, dx, dy)
•context . drawImage(image, dx, dy, dw, dh)
•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):

Podobne artykuły


11
komentarze: 32 | wyświetlenia: 630
11
komentarze: 40 | wyświetlenia: 654
10
komentarze: 7 | wyświetlenia: 732
10
komentarze: 5 | wyświetlenia: 620
10
komentarze: 1 | wyświetlenia: 644
10
komentarze: 8 | wyświetlenia: 871
9
komentarze: 0 | wyświetlenia: 420
9
komentarze: 0 | wyświetlenia: 410
9
komentarze: 7 | wyświetlenia: 684
9
komentarze: 20 | wyświetlenia: 572
9
komentarze: 4 | wyświetlenia: 665
9
komentarze: 12 | wyświetlenia: 587
9
komentarze: 34 | wyświetlenia: 461
9
komentarze: 18 | wyświetlenia: 498
9
komentarze: 1 | wyświetlenia: 437
 
Autor
Artykuł

Powiązane tematy






Brak wiadomości


Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska