Тег <canvas>

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

Синтаксис

<canvas id="идентификатор">
</canvas>

Атрибуты

height: Задает высоту холста. По умолчанию 300 пикселов.
width: Задает ширину холста. По умолчанию 150 пикселов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример. Использование тега <canvas>

HTML 5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script> 
   window.onload = function() {
    var drawingCanvas = document.getElementById('smile');
    if(drawingCanvas && drawingCanvas.getContext) {
     var context = drawingCanvas.getContext('2d');
     // Рисуем окружность 
     context.strokeStyle = "#000";
     context.fillStyle = "#fc0";
     context.beginPath();
     context.arc(100,100,50,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем левый глаз 
     context.fillStyle = "#fff";
     context.beginPath();
     context.arc(84,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем правый глаз 
     context.beginPath();
     context.arc(116,90,8,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // Рисуем рот
     context.beginPath();
     context.moveTo(70,115);
     context.quadraticCurveTo(100,130,130,115);
     context.quadraticCurveTo(100,150,70,115); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas id="smile" width="200" height="200">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Вывод рисунка с помощью тега <canvas>

Рис. 1. Вывод рисунка с помощью тега <canvas>

Другие статьи по теме

Давайте порисуем

Оригинал: http://diveintohtml5.info/canvas.html

Перевод: Влад Мержевич

В HTML5 определен элемент <canvas> как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.

HTML5Изображения

Если вам понравились материалы сайта, вы можете поддержать сайт, купив справочник по HTML в формате CHM, в виде набора HTML-файлов или в формате PDF за 30 р.

[ Сообщить о найденной ошибке ]