HTML :: Тег <canvas>
В HTML тег <canvas> (от англ. canvas – холст) создает на странице область, в которой при помощи скриптов, в основном JavaScript, можно создавать анимацию, выводить изображения, а также рисовать их, трансформировать и менять свойства.
Внутри элемента <canvas> разрешается располагать альтернативное содержимое, например, изображение или предупреждение о том, что браузер не поддерживает этот тег. Данное содержимое не будет отображаться, если тег поддерживается браузером.
При использовании CSS для изменения размеров холста, следует иметь в виду, что масштабироваться будет и все содержимое элемента <canvas>, что может негативно сказаться на его отображении (например, может появиться заметная пикселизация изображения размером 150х300 пикселей при увеличении размера холста со 150х300 до 300х600 пикселей).
Синтаксис
<canvas id="Идентификатор">
...
</canvas>
Закрывающий тег: обязателен.
Атрибуты
- height – задает высоту холста (по умолчанию 150px).
- width – задает высоту холста (по умолчанию 300px).
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/canvas
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <!-- Текст отобразится, если элемент не поддерживается --> <canvas id="my_canvas" width="300" height="200"> Извините, ваш браузер нет поддерживает элемент <canvas>. </canvas> <!-- Скрипт закрашивает область холста зеленым цветом --> <script type="text/javascript"> var my_canvas=document.getElementById('my_canvas'); var ctx=my_canvas.getContext(«2d»); ctx.fillStyle='#009900'; ctx.fillRect(0,0,my_canvas.width,my_canvas.height); </script> </body> </html>
Пример №1