Rysowanie w JavaScript

<Canvas> to nowy element wprowadzony w specyfikacji HTML5. Umożliwia on utworzenie w dokumencie obszaru, na którym można następnie rysować za pomocą języków skryptowych (głównie JavaScript).

Jakiś czas temu postanowiłem zobaczyć jak działa to w praktyce, a przy okazji przekonać się czy i jakie różnice szybkości i płynności wystąpią w przypadku uruchamiania skryptów w różnych przeglądarkach. W tym celu napisałem dwa skrypty. Pierwszy wykreśla w oknie przeglądarki najsłynniejszego z fraktali - Zbiór Mandelbrota. Drugi to prosta animacja 3D. Skrypty uruchomiłem w czterech najpopularniejszych przeglądarkach: IE 9, Operze 11.61, Firefoxie 9 i Chromium 16. Akceleracja sprzętowa w każdym przypadku była wyłączona.

Parametry sprzętu:

Procesor: AMD Athlon (tm) II P320 Dual-Core 2.10 GHz
Pamięć: 3 GB DDR3
Karta graficzna: ATI Radeon HD 4250
System: Windows 7 64-bit

Różnice prędkości widoczne są szczególnie w przypadku skryptu wykreślającego Zbiór Mandelbrota. Wyniki wyglądają następująco:

IE9 - 4088 ms.
Opera - 5190 ms.
Chromium (SRWare Iron 16) -

Kilka uwag o HTML 5

Do niedawna podstawowa zasada tworzenia układu stron WWW, jaką opisywano we wszystkich książkach o tej tematyce, brzmiała - layout strony należy tworzyć w oparciu o znaczniki <div>, a nie w oparciu o tabele. Okazuje się, że wraz z pojawieniem się piątego wydania podstawowego narzędzia do tworzenia stron internetowych <div> nie tylko dzieli los swojego poprzednika jeśli chodzi o zastosowanie go w budowie układu strony, ale wręcz staje się znacznikiem przestarzałym.

HTML 5 wprowadza wiele nowych znaczników, których celem jest lepsze zorganizowanie struktury całego dokumentu. Mamy tag <header> odpowiedzialny za nagłówek dokumentu, <footer> odpowiedzialny za jego stopkę, <section>, <article> odpowiedzialne za jego poszczególne części. Wymieniłem jedynie te najważniejsze, w rzeczywistości nowych znaczników stosowanych do organizacji dokumentu jest w HTML 5 o wiele więcej. Ich przewagą nad <div> ma być to, że mają one sprecyzowany charakter i przeznaczenie, podczas gdy ten drugi jest obu tych cech pozbawiony.