Главная -> Блоги о HTML5 -> Использование html5 Canvas 2D API: Часть 1

Использование html5 Canvas 2D API: Часть 1

<canvas> - новый элемент HTML. Он используется для рисования графики с помощью JavaScript. Этот элемент впервые был реализован компанией Apple в доске для рисования в Mac OS X, а затем перенесен в браузер Safari. Сейчас этот элемент поддерживается такими браузерами как Opera, Firefox, Google Chrome и т.д.

В этом учебном пособии я покажу вам как использовать <canvas> у Вас на сайте.

Использование <canvas> не сложно, однако требует от вас начального знания HTML и JavaScript.

Вот так выглядит описание этого элемента:

<canvas id="example" width="400" height="200"></canvas>

Здесь мы видим два обязательных атрибута - width и height, которые обозначают длину и высоту области рисования соответственно. Если они не указаны, то по умолчанию длина будет равно 300 пикселей, а высота 150 пикселей. Атрибуты <canvas> могут также задаваться через css.

Так как канвас - новый элемент, он реализован еще не во всех браузерах. Специально для этого в спецификации HTML5 описаны действия, которые нужно выполнять браузеру если поддержка нового элемента отсутствует.

Альтернативный контент нужно поместить внутри тега <canvas>:

<canvas id="example" width="150" height="150"> 
<p>Ваш браузер не поддерживает canvas</p>
</canvas>

Браузеры, которые не поддерживают canvas, будут игнорировать контейнер и будут обрабатывать только его содержание. Другие браузеры будут игнорировать содержание контейнера, а обработают только сам контейнер.

Важно заметить, что по замыслу Apple, этот тег обязательно должен закрываться. Т.е. должен выглядеть так: <canvas ...></canvas>, но никак не <canvas ... />.

Тег <canvas> предоставляет ограниченную область для рисования в ней. В этом уроке мы подробно остановимся на рисовании 2D объектов.

При инициализации тег пуст и для рисования нам необходимо получить доступ к обрабатываемому контексту (rendering context). Как сделать это показано в следующем примере:

var canvas = document.getElementById('example'); 
var ctx = canvas.getContext('2d');

Теперь мы рассмотрим как проверить поддержку Canvas API средствами JavaScript:

var canvas = document.getElementById('example'); 
if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 // здесь размещается код рисования на canvas 
else { 
 // здесь размещается код, который обрабатывается если браузер не поддерживает Canvas API
}

Для упрощения дальнейшей работы, мы напишем небольшой шаблон для использования HTML5  Canvas API:

<!DOCTYPE html>
<html> 
 <head> 
  <title>Canvas tutorial</title> 
  <script type="text/javascript"> 
   function draw(){ 
    var canvas = document.getElementById('tutorial'); 
    if (canvas.getContext){ 
     var ctx = canvas.getContext('2d'); 
    } 
   } 
  </script> 
  <style type="text/css"> 
   canvas { border: 1px solid black; } 
  </style> 
 </head> 
 <body onload="draw();"> 
  <canvas id="tutorial" width="150" height="150"></canvas> 
 </body> 
</html>

Простой пример рисования в Canvas можно увидеть тут: http://html5blog.ru/examples/canvas-simple-example.php

Исходный код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример использования тега canvas</title>
<script>
function onLoadFunc(){
 var canvas = document.getElementById("c");
 context = canvas.getContext("2d");
 context.fillStyle = "rgba(0, 0, 255, 0.5)"
 context.fillRect(10, 20, 150, 100);
 context.fillStyle = "rgba(0, 255, 0, 0.5)"
 context.fillRect(20, 30, 150, 100);
 context.fillStyle = "rgba(255, 0, 0, 0.5)"
 context.fillRect(30, 40, 150, 100);
 }
</script>
</head>
<body onload="onLoadFunc();">
<canvas id="c" width="300" height="200">
<p>Браузер не поддерживает функцию Canvas</p>
</canvas>
</body>
</html>

Здесь используются две незнакомые нам функции: fillStyle - задает цвет и прозрачность кисти рисования и fillRect - рисует прямоугольник с заданными координатами и размерами.

В результате, если Ваш браузер поддерживает Canvas 2D API, вы увидите следующую картинку:

Пример рисования в Canvas

иначе будет выведено сообщение о том, что HTML5 Canvas не поддерживается.