Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Тег canvas

Дата:7.09.15 в 12:27
Справочник: 

Характеристики тега

В каких браузерах работает?

9.0+ 6.0+ 9.6+ 3.1+ 4.0+ 2.1+ 3.0+

В каких спецификациях используется?

HTML - - 5.0
XHTML - -

Для чего используется?

Тег позволяет выбрать область, в пределах которой можно будет рисовать, корректировать рисунки и менять их исходные параметры. Процесс рисования выполняется через особые скрипты. Общепринято использовать в качестве языка программирования для подобных случаев - JavaScript. Цвета линий и расскрас рисунка контролируется тоже через скрипты.

Тег <canvas> позволяет создавать не только рисунки, но и анимации, игры и прочее. Довольно часто <canvas> используют для отрисовки графиков зависимостей функций. Это позволяет не прибегать к документу XHTML и его графическим дополнениям, а использовать формат HTML. Возможности данного тега не ограничиваются анимациями, графиками и играми. Умелый веб-разработчики через этот тег создают целые проигрыватели медиа файлов и плееры для воспроизведения музыки и видео.

Сanvas имеет потенциальную возможность обезопасить веб-ресурс от хакерских атак, усложнив каптчу. Суть процесса заключается в том, что в качестве каптчи выступает не картинка, а набор точек, через которые скрипт пишет нужное содержимое для проверки.

Стоит также отметить, что в старых спецификациях HTML этот тег не упоминается. Сведения о нем можно найти только в последней версии HTML 5.

Известно, что <canvas> предназначен для отрисовки только двухмерных рисунков, однако сегодня компания Mozilla Foundation развивает проект, который позволит в canvas рисовать трехмерные объекты. Это будет реализовано благодаря добавки к функционалу ускорители графики нижних уровней.

Как правильно задавать?

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

Какие атрибуты поддерживаются?

  • height - определяет высоту области, на которой выполняется рисунок. Изначально тег задает высоту в 300 пикселей.
  • width - определяет ширину области, на которой выполняется рисунок. Изначально тег задает ширину в 150 пикселей.

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

Закрытый тег

Да.

Пример использования

<!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 = "#00ccff";
     context.beginPath();
     context.arc(150,150,75,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // скрипт для глаз
     context.fillStyle = "#b8f4ff";
     context.beginPath();
     context.arc(126,135,12,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.fill();
     // скрипт для улыбки
     context.beginPath();
     context.moveTo(105,173);
     context.quadraticCurveTo(150,195,195,173);
     context.quadraticCurveTo(150,225,105,173); 
     context.closePath();
     context.stroke();
     context.fill();
    }
   }
  </script>
 </head>
 <body>
  <canvas id="smile" width="700" height="250">
    <p>Рисунок не удался</p>
  </canvas>
 </body>
</html>

По итогу получаем

canvas

Пример показывает, посредством которых простейших функций JavaScript получают картинки. Также пример показывает, как ориентироваться в активном поле Сanvas при указании координат расположения ключевых составляющих изображения. Также для рисунка закодированы команды изменения цвета рисунка. Кодировка цвета в скриптовом коде ничем не отличается от стандартных веб-цветов и шестнадцатеричной системы.

Оценка: 
Оценок: 1 (средняя 5 из 5)
Тип html тега: 
Понравилась статья? Расскажите о ней друзьям: