Простой пример работы с HTML5 Canvas

Одной из главных особенностей HTML5 стал тег (элемент) <canvas> (канва). Первыми канву стали поддерживать Apple в Mac OS X Dashboardи браузере Safari. Браузеры на движке Gecko (например, FireFox) также имеют поддержку тега <canvas>. Это первая статья на сайте о канве в HTML5, поэтому не будем углубляться в подробности.

Следующий код позволяет инициализировать канву на странице после ее полной загрузки:

  1. <html>
  2. <head>
  3. <title>Canvas tutorial</title>
  4. <script type="text/javascript">
  5. function draw(){
  6. var canvas = document.getElementById(‘tutorial’);
  7. if (canvas.getContext){
  8. var ctx = canvas.getContext(’2d’);
  9. }
  10. }
  11. </script>
  12. <style type="text/css">
  13. canvas { border: 2px solid red; }
  14. </style>
  15. </head>
  16. <body onLoad="draw();">
  17. <canvas id="tutorial" width="175" height="175"></canvas>
  18. </body>
  19. </html>

Функция Draw() вызывается после того, как браузер закончит загрузку и построение DOM. Функция всего лишь получает контекст для рисования — ctx. С ним нужно работать.
В следующем примере нарисуем 2 перекрывающих друг друга прямоугольника:

  1. <html>
  2. <head>
  3. <script type="application/x-javascript">
  4. function draw() {
  5. var canvas = document.getElementById("canvas");
  6. if (canvas.getContext) {
  7. var ctx = canvas.getContext("2d");
  8.  
  9. ctx.fillStyle = "rgb(40,0,0)";
  10. ctx.fillRect (20, 20, 65, 60);
  11.  
  12. ctx.fillStyle = "rgba(0, 0, 160, 0.5)";
  13. ctx.fillRect (40, 40, 65, 60);
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body onLoad="draw();">
  19. <canvas id="canvas" width="150" height="150"></canvas>
  20. </body>
  21. </html>

Таким образом, используя канву и javascript можно создавать самые разные эффекты. Я обязательно вернусь к работе с canvas в последующих статьях.

Запись опубликована в рубрике HTML & CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">