Canvas, czyli grafika z przeglądarki. Część druga: biblioteka Doodle

Wprowadzony w specyfikacji piątej wersji standardu HTML element <canvas> pozwala na tworzenie grafiki rastrowej z poziomu przeglądarki za pomocą funkcji JavaScriptu. Wbudowane funkcje są jednak w wielu zastosowaniach zbyt „niskopoziomowe”, co powoduje, że trzeba dodatkowo napisać bardzo dużo kodu, by stworzyć prosty rysunek. Z pomocą przychodzi biblioteka Doodle.

Zanim zaczniesz

Zanim zaczniesz czytać ten artykuł, zapoznaj się z częścią pierwszą.

Bibliotekio JavaScriptu zdecydowanie przyspieszają tworzenie skryptów i upraszczają pewne powtarzające się czynności. W niniejszym artykule opisujemy Doodle.js - bibliotekę stworzoną przez Billy'ego lamberta.

I choć jest ona dostępna dopiero w wersji 0.1.1, już teraz świetnie spisuje się w zadaniach, do których została stworzona. Ułatwia zarówno rysowanie prostych kształtów - prostokątów i okręgów - jak i tworzenie animacji. Dodatkowo, biblioteka oferuje możliwość modyfikacji i transformacji kształtów.

Zarys użycia

Aby zacząć korzystać z bibliotek Doodle, wystarczy tylko utworzyć element <canvas> w kodzie HTML oraz włączyć kod JavaScript w obręb dokumentu. Za rysowanie odpowiada funkcja uruchamiana w trakcie zdarzenia onLoad ciała dokumentu. Dodatkowo, aby umożliwić użytkownikom przeglądarek MSIE oglądania efektów skryptu, należy skorzystać ze skryptu Explorercanvas (http://code.google.com/p/explorercanvas/)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
 <script src="doodle-0.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 function init() {
 //cały kod umieszcza się tutaj

 };
 </script>
 </head>
 <body onload="javascript:init();">
 <canvas id="my_canvas" width="600" height="400">
 <p>Treść wyświetlana użytkownikom przeglądarek nieobsługujących.</p>
 </canvas>
 </body>
</html>

Wszystkie funkcje biblioteki są dostępne poprzez obiekt o nawie $doodle (tworzony podczas jej importowania), ale dla zwiększenia czytelności i ułatwienia pisania można przypisać go do zmiennej oo. Skąd taka nazwa? Autor biblioteki tłumaczy to tym, że łatwo go zapisać, zapamiętać i dobrze kojarzy się mężczyznom.

Aby narysować pierwszy kształt - kwadrat, należy w odpowiednim miejscu wkleić poniższy kod.

   

(function(oo) {
oo.canvas('#my_canvas');
oo.rect({x:25, y:25, width:50, height:50, fill: 'black'}).draw(); 
})($doodle);

Za rysowanie okręgów odpowiada natomiast funkcja circle:

oo.circle({x:cx, y:cy, radius:10, fill:'#ff0000'});

Transformacje kształtów

To jedna z ciekawszych funkcji biblioteki. Utworzony kształt można „zapisać" w zmiennej, a potem wielokrotnie się do niego odnosić, przykładowo w celu narysowania wielu podobnych okręgów, ale o innym kolorze.

Zmodyfikujmy kod, który pojawił się w poprzednim akapicie:

(function(oo) {
 oo.canvas('#my_canvas');
 oo.rect({x:25, y:25, width:50, height:50, fill: 'black'}).draw()
.modify({x:'+= 5',y:function(o,p){return p*2;},fill:'blue'}).draw()
; 
})($doodle);

Funkcja modify pozwala na zastosowanie operatorów takich jak „+=" lub „-=", a nawet funkcji, dzięki czemu można wprowadzać bardziej skomplikowane modyfikacje niż tylko podanie nowej wartości liczbowej.

Zdecydowanym ułatwieniem jest także możliwość przypisania obiektu do zmiennej i potraktowania go jako bazy do dalszego rysowania. Tym sposobem można utworzyć prostokąt:

(function(oo) {
 oo.canvas('#my_canvas');
 var box = oo.rect({x:25, y:25,
 width:50, height:50, fill:"#ff0000"});
/* box.draw(); */ //prostokąt wcale nie musi być narysowany 
})($doodle);

A potem dopiero rysować kształty na nim bazujące.

(function(oo) {
 oo.canvas('#my_canvas');
 var box = oo.rect({x:25, y:25,
 width:50, height:50, fill:"#ff0000"});
 box.draw(); 
 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
 box.modify({fill:'purple'}).rotate(-45).draw();
 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw(); 
})($doodle);

Użyte powyżej funkcje pozwalają na kolejne modyfikacje kształtów: translate powoduje przesunięcie o podane koordynaty, rotate to oczywiście obrót o zadany kąt wobec osi znajdującej się w górnym lewym rogu kształtu, scale to zmiana wielkości, a trans form to połączenie funkcji odpowiedzialnych za przesunięcie, obrót i skalowanie kształtu.

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »

Komentarze

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.