HTML тег <canvas>

Тег <canvas> (в пер. с англ. - холст) создает область на веб-странице, в которой можно создавать разные объекты, рисунки, анимацию, фото композиции при помощи Javascript скриптов. Тег появился в пятой версии HTML.

При работе с canvas важно различать такие понятия, как элемент canvas и контекст элемента, поскольку их довольно часто путают. Элемент canvas - это то, что встроено в HTML (узел DOM), а контекст canvas - это объект со своим методом и свойствами для визуализации. Контекстом может быть 2D и 3D. Элемент canvas может иметь только один контекст.

Синтаксис

Тег <canvas> парный, его содержимое пишется между открывающим (<canvas>) и закрывающим (</canvas>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head> 
  <body>
         <canvas id="myCanvas">Ваш браузер не поддерживает HTML5 элемент canvas.</canvas>
         <script>
              var c=document.getElementById('myCanvas');
              var ctx=c.getContext('2d');
              ctx.fillStyle='#ff9311';
              ctx.fillRect(10,50,80,80);
         </script>
   </body>
</html>

Результат

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head> 
  <body>
      <canvas id="myCanvas" width="400" height="200"></canvas>
      <script>
           var canvas = document.getElementById('myCanvas');
           var context = canvas.getContext('2d');
            context.font = '30pt Calibri';
            context.fillStyle = 'orange';
            context.fillText('Пример Canvas!', 50, 100);
      </script>
  </body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
height pixels Задает высоту элемента в пикселах. Значение по умолчанию - "150".
width pixels Задает ширину элемента в пикселах. Значение по умолчанию - "300".

Тег <canvas> поддерживает глобальные атрибуты и атрибуты событий.

Browser support

4+ 9+ 2+ 3.1+ 9+



Related articles