HTML5 <canvas> tag

Nowy tag jest HTML5 <canvas> tag nie jest obecny w poprzednich wersjach, które mogą być używane do rysowania i pracy z grafiką.

<canvas> Tag potrzebuje pomocy języków skryptowych, takich jak JavaScript, aby prawidłowo funkcjonować i wykonywać w pełni swojego potencjału.

Celem niniejszego artykułu jest przedstawienie podstawowych korzystania z nowych znaczników, ale kilka punktów zaawansowanych przez stałe korzystanie z praktycznych przykładów, mam nadzieję, ułatwi życie.

Przesłanka

Jako absolutną nowość w najlepszym płótnie nie jest obsługiwany przez wszystkie przeglądarki, więc możliwe jest, że przykłady demonstracji w tym artykule nie są wyświetlane poprawnie.
Badanie przeprowadzono z Google Chrome, na których nie wystąpiły jakiekolwiek problemy.

Użyj <canvas> tag

Wspólne wykorzystywanie znacznika Canvas jest bardzo prosty i nie różni się od innych znaczników HTML.
Formalnie Canvas jest prostą pojemnika i jako taki ma tagu otwierającego (<canvas>) i zamknięcia (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Element nie jest obsługiwany







 </ Canvas>

Jeśli wymiary nie są podane jawnie (za pomocą atrybutów szerokość i wysokość) wielkości kontenera nadany jest domyślnie, podstawowe prostokąta o wysokości 300 i 150.
Atrybut id, oczywiście, nie jest konieczne, ale, moim zdaniem, jest to zawsze dobry pomysł, aby zadzwonić posiadać unikalny odniesienia dla każdego obiektu, który jest używany na stronie.

Rozdzielonych części tekstu <canvas> i </ canvas> do reprezentowania pamiętać, sygnalizuje, że grafika nie jest obsługiwany przez przeglądarkę.

Przed rozpoczęciem ze szczegółami wykonania testu potencjał płótnie za pomocą prostego kodu do testowania żywych:

 <canvas id="bandierina" width="180"> height = "100"> Nieobsługiwane </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ("flaga");







 var c = canvas.getContext ('2 d ');







 c.fillStyle = "# FF0000";







 c.fillRect (0,0,180,100);







 c.fillStyle = "# FFFFFF";







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00 ";







 c.fillRect (0,0,60,100);







 </ Script>

Na tej stronie można zobaczyć wynik tego kodu (aby zobaczyć wyjście poprawnie, musisz ponownie przeglądarkę, która obsługuje HTML 5).

Jak już ogłoszono na początku tego artykułu w tej części kodu jest wyraźnie fakt, że praca płótnie za pomocą skryptu. Na tym przykładzie możemy od razu zwrócić uwagę na standardowe techniki, aby wyodrębnić zmienne płótnie obiekt w tle:

 / / Utwórz element canvas przez ID







 var canvas = document.getElementById ("flaga");









 / / Utwórz nowy dwuwymiarowy obiekt na płótnie







 var c = canvas.getContext ('2 d ');

Metody getElementById Javascript sklepach obiektu w zmiennej płótnie, poprzez jej wartości pola id; getContext ('2 d ') ma kontekst, lub obiekt, który oferuje programiście szereg metod do pracy z płótna pożądanych (w naszym przypadku chcemy pracować z dwuwymiarowej grafiki funkcje, czyli 2D).

W kolejnych stronach podajemy kilka podstawowych operacji przydatnych dla programisty zamierza skorzystać z płótna.

• <<
• 1
• 2
• 3
• 4
• 5
• >>