Element Canvas

Nadchodzący HTML 5 ma przynieść wiele udogodnień dla web developerów. Ma to być m. in. obsługa zdarzeń „przeciągnij i upuść” (drag and drop), obsługa audio i video oraz rysownie grafiki 2D. Właśnie ten element wzbudził moją największą ciekawość tym bardziej, że jest już od jakiegoś czasu wspierany przez przeglądarki.

Pierwsza implementacja tego elementu znalazła się w Safari, później dopiero w silniku Gecko i Operze. Jak zawsze z tyłu pozostaje Internet Explorer. Aby użyć ten element, trzeba doinstalować plugin XForms napisany przez Novell’a lub dołączyć excanvas – skrypt, który można znaleźć w repozytorium Google. Wprowadza on te same funkcje, używają JavaScript’u.

Nieco ulepszonym rozwiązaniem jest MooTools Canvas, który łączy w sobie funkcjonalność MooTools i wsparcie excanvas dla Internet Explorera.

Firefox 3 poszedł nieco dalej i dołączył nawet 3D API w swojej przeglądarce. Więcej na ten temat można poczytać na https://wiki.mozilla.org/Canvas:3D

Element Canvas wygląda podobnie do Img z tą różnicą, że posiada tylko atrybuty width i height (plus standardowe). Do API mamy dostęp oczywiście przez JavaScript. Funkcje wyglądają bardzo podobnie jak w innych znanych 2D API.

Polecam tutoriale:
http://developer.mozilla.org/en/Canvas_tutorial
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

oraz zobaczenie dobrego przykładu jakim jest MochaUI, które już opisywałem w innym wątku.
Link do demo:
http://mochaui.com/demo/