Этот элемент создает на веб-странице пустой прямоугольник, внутри которого затем визуализируются результаты применения методов, входящих в API холста. Добавляя в код страницы данный элемент, вы генерируете пустое пространство, аналогичное пустому элементу <div>, но имеющее совершенно иное предназначение.
Листинг 7.1. Синтаксис элемента <canvas>
<!DOCTYPE html>
<html lang="ru">
<head>
<title>API холста</title>
<script src="canvas. js"></script>
</head>
<body>
<section id="canvasbox">
<canvas id="canvas" width="500" height="300">
В вашем браузере элемент canvas не поддерживается </canvas>
</section>
</body>
</html>
Как видно из листинга 7.1, для этого элемента нужно указать буквально пару атрибутов. Атрибуты width и height определяют размер блока, их необходимо добавлять всегда, так как любые объекты, которые визуализируются поверх данного элемента, ориентируются на эти значения. Если также указать атрибут id, то вы сможете с легкостью сослаться на элемент <canvas> из кода JavaScript.
Итак, мы изучили всю функциональность элемента <canvas>: он всего лишь создает на экране пустой блок. Для того чтобы извлечь из этой поверхности практическую пользу, нужно добавить JavaScript-код и воспользоваться новыми методами и свойствами, появившимися в API.
В целях обеспечения совместимости на случай, если браузер не поддерживает API Canvas (Холст), мы добавили между тегами <canvas> альтернативное содержимое. Оно будет отображаться на экране в устаревших и несовместимых браузерах.
Добавить комментарий