Обучение canvas:Основы
Материал из MDC.
Содержание |
[править] Элемент <canvas>
Давайте начнём обучение, взглянув на сам элемент <canvas>.
<canvas id="tutorial" width="150" height="150"></canvas>
Он очень похож на <img>, с той лишь разницей, что не содержит атрибутов src и alt. Элемент <canvas> имеет всего два атрибута - width и height. Оба они не обязательны, и могут быть заданы через свойства DOM. Если ширина и высота не определены, canvas будет создан шириной в 300 пикселей и 150 пикселей высотой. Размер элемента может быть произвольным и задаваться через CSS, но при прорисовке картинка масштабируется в соответствии с компоновкой.
Атрибут id не специфичен для элемента <canvas>, но является одним из атрибутов HTML по умолчанию, и может быть применён почти ко всем элементам HTML (также как class, например). Всегда определять id элемента - хорошая идея, т.к. это значительно упрощает идентификацию его в нашем скрипте.
Стиль элемента <canvas> может настраиваться также, как и нормального изображения (margin, border, background, и т.п.). Эти правила, однако, не влияют на само рисование в canvas. Позже в этой статье вы увидите как это происходит.
Если никакие настройки стиля не заданы, canvas будет создан полностью прозрачным.
[править] Аварийное содержимое
В связи с тем, что элемент <canvas> относительно новый, и не реализован в некоторых браузерах (таких как Firefox 1.0 и Internet Explorer), нам необходимо предоставить некое аварийное содержимое элемента, если браузер этот элемент не поддерживает.
Это очень просто: мы всего-лишь предоставляем альтернативное содержимое внутри элемента canvas. Браузеры, не поддерживающие <canvas>, проигнорируют контейнер и обработают аварийное содержимое внутри него. Браузеры же, поддерживающие <canvas>, проигнорируют содержимое контейнера и нормально обработают canvas.
К примеру, мы можем выдать текстовое описание содержимого canvas, либо показать статичную картинку вместо динамически рисуемого содержимого. Это может выглядеть примерно так:
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
[править] Необходимость тэга </canvas>
В реализации Apple Safari элемент <canvas> исполнен почти как <img>: он не имеет закрывающего тэга. Однако, для широкого распространения <canvas> в сети, должна быть предоставлена возможность выдачи аварийного содержимого. Следовательно, имплементация Мозиллы требует закрывающий тег (</canvas>).
Если аварийное содержимое не необходимо, простой код <canvas id="foo" ...></canvas> будет полностью совместим и с Safari и с Mozilla. Safari попросту проигнорирует закрывающий тэг.
Если аварийное содержимое желательно, то для сокрытия его в Safari должны быть использованы некоторые CSS хитрости, отображающие только canvas. А также понадобятся новые CSS хитрости, скрывающие предыдущие хитрости от IE (чтобы отобразить аварийный контент).
[править] Контекст отрисовки
<canvas> создаёт поверхность для рисования, предоставляющую один или более контекст отрисовки, который используется для создания отображаемого контента и манипуляций с ним. Мы сфокусируемся на 2D (двухмерном) контексте отрисовки, который на данный момент является единственным определённым контекстом. В будущем другие контексты смогут поддерживать другие типы отрисовки: например, вполне вероятно, что будет добавлен 3D контекст, основанный на OpenGL ES.
<canvas> изначально пустой, и для того, чтобы что-либо отобразить, скрипту необходимо получить контекст отрисовки и рисовать уже на нём. Элемент canvas имеет DOM-метод, называемый getContext, и предназначенный для получения контекста отрисовки вместе с его функциями рисования. getContext() принимает один параметр - тип контекста.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
Первой строкой мы получаем DOM-узел нашего canvas, используя метод getElementById. А получить доступ к контексту рисования мы можем методом getContext.
[править] Проверка поддержки
Аварийное содержимое отображается браузерами, не поддерживающими <canvas>. Скрипты также могут проверять поддержку во время исполнения. Это легко делается проверкой наличия метода getContext. Наш предыдущий кусочек кода превращается примерно в следующее:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
[править] Минимальный шаблон
Вот шаблон, который мы будем использовать как отправную точку для последующих примеров. Вы можете загрузить этот файл для работы в вашей системе.
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Если вы взглянете на скрипт, то увидите, что я создал функцию draw, которая исполняется один раз, когда загрузка страницы завершена (с помощью атрибута onload в теге body). Эта функция могла бы быть вызвана и через setTimeout, setInterval, или через любой другой обработчик события, лишь бы в момент окончания загрузки.
[править] Простой пример
Для начала, вот простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет альфа-прозрачность. Как это работает мы изучим более детально в последующих примерах.
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>