HTML5 Учебное пособие по элементам холста
Холст элемент
На этой странице мы обсудили описание, использование, атрибуты, пример и результат, совместимость HTML5-элемента canvas.
HTML-элемент Canvas (<canvas>) предоставляет нам возможность рисовать графику в браузере. Обычно это делается с помощью JavaScript. Элемент HTML5 Canvas открыл новый канал для создания приложений, потрясающей графики и анимации с использованием HTML5 и JavaScript.
использование
<canvas id = "identity" width = "width" height = "height"> </ canvas>
Где «идентификация» - это идентификация блока холста в HTML-странице / приложении, «ширина» и «высота» - это ширина и высота области, используемой элементом холста для представления графики или анимации.
Требуется ли начальный и конечный тег
И начальный тег, и конечный тег являются обязательными.
Что может содержать элемент canvas
Он может содержать либо фразы, либо содержимое потока.
Какие элементы могут содержать элемент canvas
Любой элемент, который принимает контент фразы или любой элемент, который принимает содержимое потока.
Атрибуты
Помимо глобальных атрибутов, элемент canvas имеет два атрибута: width и height. Следующая таблица показывает детали этих атрибутов.
| Наименование атрибута | Описание | Значение по умолчанию |
|---|---|---|
| ширина | Ширина координатного пространства браузера, занятого связанным элементом canvas для представления графики или анимации. Измеряется в пикселях. | 300 |
| рост | высота координат браузера, занимаемая связанным элементом canvas для представления графики или анимации. Измеряется в пикселях. | 150 |
пример
<!DOCTYPE html>
<head>
<title>Canvas tutorial example</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById('example');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onload="draw();">
<canvas id=”example” width=”250" height=”250"></canvas>
</body>
</html>
Результат
Совместимость
| Особенность | Firefox (Геккон) | Хром | Internet Explorer | опера | Сафари |
|---|---|---|---|---|---|
| Базовая поддержка | 1,5 (1,8) | 1,0 | 9,0 | 9,0 | 1,0 |
Предыдущий: HTML5 аудио элемент обучения
Далее: HTML5 команда Element Tutorial
Новый контент: Composer: менеджер зависимостей для PHP , R программирования