В этом посте я собираюсь начать изучение одной из самых новых функций HTML5, а именно элемента Canvas.
Что такое холст?
Лучшее место для начала — в начале, и это объясняет, что такое Canvas. Canvas — это новый элемент, который является частью спецификации HTML5 и может быть добавлен в вашу разметку так же просто, как это:
<canvas id="myCanvas" width="500" height="500"></canvas>
ОК, мы закончили. Давай пойдем домой.
Конечно, это не так просто. Добавив элемент canvas к разметке, если мы просматриваем страницу, содержащую этот элемент, в современном браузере, который поддерживает canvas (вы можете узнать, какие браузеры поддерживают canvas, используя caniuse.com ), вы ничего не увидите. Зачем? Потому что все, что дает вам тег <canvas>, это чистый лист, и если вы не изменили цвет фона своей страницы, фон страницы и холст будут белыми. Не очень интересно смотреть, поэтому я избавлю вас от скриншота чистого холста. Просто поверьте мне, что приведенная выше разметка дает вам поверхность для рисования шириной 500 пикселей и высотой 500 пикселей, и (при условии, что это единственный элемент в теле вашей страницы) появится в левом верхнем углу вашей страницы.
Создание шаблона
Чтобы упростить жизнь при изучении Canvas HTML5, я начну с базового набора разметки и сценариев, а в следующих статьях этой серии я добавлю этот базовый шаблон. Поскольку он будет состоять исключительно из разметки HTML, CSS и Javascript, вы можете использовать любой текстовый редактор, который вам нравится. Я буду работать с бета-версией Microsoft WebMatrix 2, которую вы можете скачать здесь (вы можете выбрать либо текущую версию v1, либо бета-версию v2, используя большие зеленые кнопки в правом верхнем углу).
Вот основной шаблон, который я собираюсь использовать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
Некоторые вещи, на которые стоит обратить внимание:
- В строке 7 я устанавливаю блок <style>, в который мы поместим правила CSS.
- В строке 13 я добавил контент между тегами <canvas> и </ canvas>. Любой браузер, который не поддерживает Canvas, будет игнорировать теги canvas и отображать содержимое внутри них. В этом случае я просто отображаю сообщение, но я мог бы также предоставить запасное решение, используя Silverlight или Flash, если я выбрал.
- В строке 16 я импортирую библиотеку сценариев jQuery , которая может помочь упростить и ускорить разработку Javascript. Я размещаю ссылки на мои скрипты в конце страницы, непосредственно перед закрывающим тегом
элемента
, чтобы гарантировать, что содержимое моей страницы загружается без блокировки загрузки скрипта. - В строке 18 я сообщаю jQuery выполнить анонимную функцию, когда страница готова к написанию сценариев, используя встроенное событие готовности jQuery . Здесь я начинаю обработку, сначала получая ссылку на элемент canvas и его 2D-контекст рисования (подробнее об этом чуть позже), и вызывая функцию renderContent, которая в настоящее время пуста.
- Последнее замечание … на рабочем сайте я бы разделил CSS и JavaScript на отдельные файлы, чтобы моя разметка была красивой и чистой. Ради этой серии блогов я в основном буду хранить CSS и JavaScript в одном файле, так что вы сможете увидеть все сразу.
Все части этого шаблона будут полезны в будущем, поэтому вы можете скопировать приведенный выше код и сохранить его в файл. Я называю мой CanvasTemplate.html:
Краткое отступление — JsFiddle
Еще один полезный инструмент, который я хочу представить, так как я, вероятно, буду время от времени использовать его для публикации примера кода, это JsFiddle . JsFiddle, как утверждают документы JsFiddle , « игровая площадка для веб-разработчиков, инструмент, который можно использовать разными способами». Он поддерживает несколько библиотек JavaScript, таких как jQuery, MooTools, Prototype и многие другие, и упрощает экспериментируйте и делитесь своим веб-кодом. Вы можете увидеть пример в фрагменте кода, который я разместил, для создания сетки на холсте для помощи в визуализации макета:
Важно отметить, что JsFiddle является альфа-версией на момент написания этой статьи, и я обнаружил несколько проблем при редактировании сценариев, особенно при использовании вкладок. Но в целом, это очень функционально и довольно удобно для коротких набегов на веб-обезьяну. Для более глубокой разработки я определенно предпочитаю такую среду, как WebMatrix или Visual Studio, которая обеспечивает более надежный опыт редактирования.
Чистый лист
Вернемся к коду … как уже отмечалось выше, даже с добавлением нашего JavaScript в шаблон, наш холст все еще не делает ничего полезного. Чтобы начать рисовать, нам нужен холст, эквивалентный карандашу (или ручке, или кисти, в зависимости от того, какую метафору вы предпочитаете). И вот тут-то и возникает контекст. Элемент HTML5 Canvas предоставляет функцию getContext, которую вы можете вызывать так:
var context = myCanvasElement.getContext("2d");
Обратите внимание, что в приведенном выше фрагменте я уже получил ссылку на элемент canvas (вы увидите, как скоро), и я передаю строковый аргумент «2d» функции. Это необходимо, хотя в текущей спецификации есть только один контекст рисования, который является 2d (в будущих версиях спецификации может быть 3D-контекст, поэтому вам нужно указать 2d, даже если это единственный контекст) , Именно этот контекст раскрывает все функции, которые вы вызываете для рисования на холсте.
Получение контекста рисования занимает всего 2 строки: одна для получения ссылки на элемент холста, на котором вы хотите рисовать, а другая для получения самого контекста. Мы будем использовать jQuery для захвата элемента, используя его синтаксис селектора идентификаторов:
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
В первой строке я спрашиваю jQuery об элементе с идентификатором «myCanvas» и вызываю .get (0), чтобы получить базовый элемент (по умолчанию jQuery возвращает набор элементов, обернутых некоторыми полезными функциями… но мы просто нужен сам элемент), затем во второй строке я беру контекст рисования холста и вставляю его в переменную, которая называется, соответственно, «контекстом». В нашем шаблоне выше я определяю и заполняю эти переменные в начале анонимной функции, вызываемой готовым обработчиком событий jQuery . Поскольку функция renderContent также определена в анонимной функции, она будет иметь доступ к холсту и контексту. переменные, сохраняя при этом как переменные, так и функцию от загрязнения глобального пространства имен (то есть непреднамеренного выставления переменных и / или функций как глобальных для страницы).
Мы рассмотрим все тонкости API рисования на холсте в следующей части, но я оставлю вам простой пример того, что вы можете сделать с помощью Canvas, добавив следующий код в функцию renderContent:
function renderContent()
{
context.fillRect(0, 0, canvas.width, canvas.height);
var text = "Hello, Canvas!";
context.fillStyle = "#FF0000";
context.strokeStyle = "#0000FF";
context.font = "36px sans-serif";
context.strokeText(text, 10, 50);
context.fillText(text, 10, 50);
}
Что приводит к следующей визуализации:
Надеюсь, вам понравилась первая часть Изучения HTML5 Canvas.
Если вы нашли это полезным, почему бы не рассказать своим друзьям ? Вы также можете подписаться на мой канал RSS и подписаться на меня в твиттере для более частых обновлений.
Больше частей в серии:
- Часть 1 — эта часть
- Часть 2 — Основные формы
- Часть 3 — Пути и текст
- Часть 4 — Преобразования
- Часть 5 — Основная анимация
- Часть 6 — Управление анимированными фигурами