В этой статье мы познакомим вас c новым элементом HTML5 - canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.
Я надеюсь, вам понравится эта серия уроков. Она рассчитана на тех, кто имеет какой-то опыт работы в JavaScript, и совсем ничего не знает насчёт элемента canvas. Если вы новичок в JavaScript, не переживайте, вы приобретёте некоторые знания, прочитав данную статью.
Знакомимся с элементом Canvas Использовать элемент canvas очень простоКогда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas - это нововведение для всех браузеров.
Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.
Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.
Поддержка Этот элемент только для самых современных браузеровДолжен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.
К слову сказать, вы можете активировать данный элемент и в ранних версиях Internet Explorer при помощи данного плагина - Explorer Canvas .
Размеры элемента CanvasВ примере, расположенном выше вы уже увидели как применять атрибуты ширины и высоты: width и height. Используя CSS, вы также можете контролировать размеры canvas, как и других HTML элементов. И это вполне логично. Однако так как canvas использует в своём функционале так называемый двумерный контекст, то при применении CSS к размерам холста, приведёт к тому, что все внутренние элементы будут искажены.
Немного о двумерном контекстеНемного выше я сказал, что элемент canvas - это только половина всей истории. Вторая половина - это как раз и есть двумерный контекст, который по сути позволяет вам видеть и всю мощь функционала данного элемента.
Давайте расставим всё на свои места: когда мы используем элемент canvas, то фактически он не помещается на страницу. Вместо него вы получаете рисунок, который формируется в двумерном контексте, а доступ к этому рисунку осуществляется как раз через элемент canvas благодаря JavaScript API. В принципе кому-то эта информация может показаться лишней, однако лишние знания вам не повредят.
Система координатЕсли вы когда-либо работали с языками, имеющими дело с 2d графикой (такими как ActionScript, Processing, и т.д.), тогда вы знаете всё о системах координат, основанных на движении. Двумерный контекст в элементе canvas ничем не отличается от перечисленных систем. Он использует стандартную систему координат Cartesian, с начальной точкой (0, 0), расположенной с левой верхней стороны. Движение вправо будет увеличивать значение объекта по оси x, в то время как движение вниз, будет увеличивать значения точек объекта по оси y. Всё довольно примитивно.
Одна единица данной системы координат равняется одному пикселю вашего экрана (в большинстве случаев).
Получение доступа к двумерному контекстуДля того чтобы получить доступ к двумерному контексту, вам понадобится применить JavaScript API. В данном случае, вам потребуется функция getContext. Пример:
Canvas from scratch $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); });
Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.
В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!
Рисуем квадратыТеперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).
Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:
Ctx.fillRect(50, 50, 100, 100);
Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:
Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?
Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат - это тот же самый прямоугольник, у которого все стороны равны.
В методе fillRect может быть прописано 4 параметра:
Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:
Ctx.fillRect(x, y, width, height);
Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:
Ctx.strokeRect(50, 50, 100, 100);
Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:
Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.
Рисование по схемеПомимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.
Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:
Попробуйте следующий пример:
Ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 250); ctx.lineTo(250, 250); ctx.closePath(); ctx.fill();
Данный код нарисует треугольник чёрного цвета:
Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.
Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.
Изменение цветовИтак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.
Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:
Ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(50, 50, 100, 100);
Данный код окрасит квадрат в красный цвет:
Или вы можете изменить цвет рамки квадрата:
Ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeRect(50, 50, 100, 100);
Вот вы и научились применять данные методы:
Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.
Сразу стоит отметить, что изменение цвета не приводит к преобразованию уже существующего содержания элемента canvas. К примеру, если вы нарисовали черный прямоугольник, затем создали наполнитель для красного цвета, а потом нарисовали ещё один прямоугольник, то первая фигура останется чёрной.
Изменение толщины линийТеперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API - lineWidth.
Можете добавить данный код в прошлый пример:
Ctx.lineWidth = 20; ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.strokeRect(50, 50, 100, 100);
И вот какой у вас получится результат:
Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:
Ctx.lineWidth = 20; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 250); ctx.lineTo(250, 250); ctx.closePath(); ctx.stroke();
И вот что у вас получится:
Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.
Стираем объекты из CanvasПоследняя вещь, которую я хочу вам сегодня показать - это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться:)
В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.
В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:
Ctx.fillRect(50, 50, 100, 100); ctx.clearRect(0, 0, 500, 500);
В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.
Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.
Если вы не определились с высотой и шириной, то можете писать и так:
Ctx.clearRect(0, 0, canvas.width, canvas.height);
Стирание небольших фрагментовДля того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:
Ctx.fillRect(50, 50, 100, 100); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.fillRect(200, 50, 100, 100);
На данный момент картина такая:
Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:
Ctx.clearRect(50, 50, 100, 100);
Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:
Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.
Идём в ногу со временем Canvas прост в использовании и изученииНадеюсь, вы убедились в том, что canvas - это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.
В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.
А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент - это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.
Спецификация HTML 5 включает множество новых функций, одной из которых является тег canvas . HTML 5 Canvas (канва HTML 5) предоставляет простой и мощный способ вывода графики и рисования с использованием JavaScript. Для каждого элемента canvas можно использовать контекст, в котором нужно вызвать команды JavaScript для рисования на Canvas. Браузеры могут реализовывать несколько контекстов элемента canvas и предоставлять различные API для рисования. Следует также помнить, что рисование происходит в растровой форме, то есть, нарисовав на канве какую-либо фигуру, её нельзя будет изменить или удалить отдельно, — можно только стереть целую область канвы.
Большинство современных браузеров предоставляют возможности 2D-контекста (2D Canvas) — Opera, Firefox, Konqueror и Safari. Кроме того существуют экспериментальные сборки браузера Opera, которые включают поддержку 3D-контекста (3D Canvas), а также дополнение к Firefox, которое реализует поддержку 3D Canvas:
В этой статье вы узнаете, как использовать 2D-контекст элемента canvas , основные функции для работы с canvas , включая линии, примитивы фигур, изображения, текст и другие возможности. При изложении материала статьи предполагается, что вы владете основами JavaScript на достаточно высоком уровне.
Основы использования CanvasЧтобы создать Canvas-контекст, достаточно просто добавить элемент в HTML-документ:
Альтернативное содержимое, которое будет показано, если браузер не поддерживает Canvas.
Нужно добавить идентификатор к элементу canvas , чтобы потом обратиться к нему в JavaScript, также необходимо задать атрибуты width и height для определения ширины и высоты элемента canvas .
Для рисования внутри элемента canvas , нужно использовать JavaScript. Сначала нужно найти созданный тег canvas с помощью функции getElementById , а потом инициализировать нужный контекст. Как только это будет сделано, можно начинать рисование на канве, используя доступные API-команды выбранного контекста. Следующий скрипт рисует простой прямоугольник на канве ():
// Получить ссылку на элемент canvas по идентификатору. var elem = document.getElementById("myCanvas"); // Всегда проверяйте свойства и методы на доступность для обратной совместимости со старыми браузерами if (elem && elem.getContext) { // Получить 2D контекст. // Запомните: вы можете инициализировать только один контекст для каждого элемента var context = elem.getContext("2d"); if (context) { // Теперь мы рисуем прямоугольник, задав координаты (x,y), а также его ширину и высоту. context.fillRect(0, 0, 150, 100); } }
Canvas 2D API Заливки и границы фигурС помощью свойств fillStyle и strokeStyle вы можете легко настроить цвета, используемые для заливки и линий объектов. Значения цветов, используемые в этих методах, такие же как и в CSS: шестнадцатеричные коды (#F5E6AB), rgb(), rgba() или даже hsla(), если браузер поддерживает такой способ задания цвета (например, он поддерживается в Opera 10.00 и более новых версиях).
Используя метод fillRect , вы можете нарисовать прямоугольник с заливкой. С помощью метода strokeRect вы можете нарисовать прямоугольник только с границами, без заливки. Если нужно очистить некоторую часть канвы, вы можете использовать метод clearRect . Три этих метода используют одинаковый набор аргументов: x, y, width, height. Первые два аргумента задают координаты (x,y), а следующие два — ширину и высоту прямоугольника.
Для изменения толщины линий можно использовать свойство lineWidth . Пример использования функций fillRect, strokeRect, clearRect :
Context.fillStyle = "#00f"; // blue context.strokeStyle = "#f00"; // red context.lineWidth = 4; // Draw some rectangles. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);
Этот пример приведет к следующему результату:
Окружность и кругЧтобы нарисовать окружность, нужно выполнить такой код:
Context.beginPath(); context.arc(75, 75, 10, 0, Math.PI*2, true); context.closePath(); context.fill(); // Если нужен круг, можно залить окружность
Кривые БезьеДля создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo() . Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье в HTML 5 Canvas определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.
Метод bezierCurveTo() выглядит следующим образом:
Context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
Пример рисования кривой Безье в HTML 5 Canvas:
Window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.moveTo(188, 130); var controlX1 = 140; var controlY1 = 10; var controlX2 = 388; var controlY2 = 10; var endX = 388; var endY = 170; context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); context.lineWidth = 10; context.strokeStyle = "black"; // line color context.stroke(); };
Исполнение такого кода приведет к следующему результату:
Схема построения кривой Безье:
Контуры Canvas позволяют рисовать фигуры любой формы. Сначала нужно нарисовать "каркас", а потом можно использовать стили линий или заливки, если это необходимо. Чтобы начать рисование контура, используется метод beginPath() , потом рисуется контур, который можно составить из линий, кривых и других примитивов. Как только рисование фигуры окончено, можно вызвать методы назначения стиля линий и заливки, и только потом вызвать функцию closePath() для завершения рисования фигуры.
Следующий код демонстрирует рисование треугольника :
// Задаем свойства заливки и линий. context.fillStyle = "#00f"; context.strokeStyle = "#f00"; context.lineWidth = 4; context.beginPath(); // Начинаем рисовать треугольник с верхней левой точки. context.moveTo(10, 10); // перемещаемся к координатам (x,y) context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // Заполняем фигуру заливкой и применяем линии // Фигура не будет отображена, пока не будет вызван хотя бы один из этих методов. context.fill(); context.stroke(); context.closePath();
Этот пример будет отображен в браузере следующим образом:
Метод drawImage позволяет вставлять другие изображения (img и canvas) на канву. В браузере Opera также существует возможность рисования SVG-изображений внутри элемента canvas . drawImage довольно сложный метод, который может принимать три, пять или девять аргументов:
Спецификация HTML 5 объясняет эти аргументы следующим образом:
Благодаря возможностям метода ImageData можно сделать очень многое. Например, можно отфильтровать изображение или создать математическую визуализацию (фракталы и т.п.). Следующий код показывает, как создать простой фильтр для инвертирования цвета изображения :
// Получить массив типа CanvasPixelArray по заданным координатам и размерам. var imgd = context.getImageData(x, y, width, height); var pix = imgd.data; // Обойти все пиксели изображения и инвертировать цвет. for (var i = 0, n = pix.length; i < n; i += 4) { pix[i] = 255 - pix[i]; // красный канал pix = 255 - pix; // зеленый канал pix = 255 - pix; // синий канал // i+3 - номер элемента, содержащий альфа канал } // Отрисовать объект ImageData в заданных координатах (x,y). context.putImageData(imgd, x, y);
Ниже изображен результат работы фильтра инверсии цвета, примененного к изображению.
ТекстВ настоящее время Text API доступен только в последних сборках движка WebKit, а также в Firefox 3.1 и выше.
Следующие свойства текста доступны для объекта контекста:
Существуют два метода для вывода текста: fillText и strokeText . Первый отрисовывает текст, заполняя его заливкой стиля fillStyle , другой рисует обводку текста, используя стиль strokeStyle . Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.
Свойства выравнивания текста влияют на позиционирование текста относительно координат его вывода (x,y).
Context.fillStyle = "#00f"; context.font = "italic 30px sans-serif"; context.textBaseline = "top"; context.fillText ("Hello world!", 0, 0); context.font = "bold 30px sans-serif"; context.strokeText("Hello world!", 0, 50);
Так этот пример будет выглядеть в браузере:
Shadow API предоставляет четыре свойства:
Так будет выглядеть пример тени в браузере:
Свойства fillStyle и strokeStyle также могут иметь объекты CanvasGradient вместо обычных цветов CSS — это позволяет использовать градиенты для линий и заливок.
Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient . Первый метод создает линейный градиент, а второй — радиальный градиент.
Как только создан объект градиента, можно добавлять в него цвета с помощью метода addColorStop .
Следующий пример показывает, как использовать градиенты:
// Нужно указать начальные и конечные координаты (x,y) градиента var gradient1 = context.createLinearGradient(sx, sy, dx, dy); // Теперь можно добавлять цвета в градиент // Первый градиент определяет позицию для цвета в градиенте. // Допустимы значения от 0 (начало градиента) до 1 (конец градиента). gradient1.addColorStop(0, "#f00"); // красный gradient1.addColorStop(0.5, "#ff0"); // желтый gradient1.addColorStop(1, "#00f"); // синий // Для радиального градиента также нужно указать радиус // внутренней и внешней окружности градиента. // Координаты (x,y) определяют центры этих окружностей. var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);
Canvas - API для рисования, недавно добавленный в HTML и поддерживается большинством браузеров (даже Internet Explorer 9). Canvas позволяет рисовать всё, что вы хотите прямо в браузере без использования плагинов, вроде Flash или Java. Canvas с его обманчиво простым API может революционно преобразовать создание веб-приложений для всех устройств, а не только десктопных.
Эти скриншоты позволят вам почувствовать вкус возможностей Canvas.
Canvas - API для двумерного рисования. По сути браузер даёт вам прямоугольную область на экране, в которой вы можете рисовать линии, фигуры, изображения, текст, практически всё что хотите. Canvas первоначально был создан Apple для их виджетов, но с тех пор был принят всеми разработчиками основных браузеров и теперь Canvas является частью спецификации HTML5. Вот небольшой пример, как выглядит некоторый код Canvas:
var canvas = document.getElementById("canvas"); var c = canvas.getContext("2d"); c.fillStyle = "red"; c.fillRect(100,100,400,300);
Данный прямоугольник нарисован функцией context.fillRect() .
Важно понимать, что Canvas предназначен для рисования пикселями. В нём нет фигур или векторов. Нет объектов для связывания с обработчиками событий. Это просто рисунки пикселями на экране. Как мы ещё увидим в этом и сила и слабость.
Как это связано с другими веб-технологиями?Есть четыре способа нарисовать что-либо на веб-странице: Canvas, SVG, CSS и прямая анимация через DOM. Canvas содержит отличия от остальных трёх.
SVG - это API для рисования векторных фигур. Каждая фигура представляет собой объект, который вы можете связать с обработчиками событий. При масштабировании фигуры остаются сглаженными, в то время как в Canvas заметны пиксели.
CSS в реальности предназначен для стилизации элементов. Поскольку DOM не содержит никаких объектов, которые рисуются в Canvas, вы не можете использовать CSS для их стилизации. CSS будет влиять только на прямоугольную площадь самого Canvas, так что вы можете установить границы, цвет фона и на этом всё.
Анимация через DOM : DOM или Document Object Model (объектная модель документа) определяет каждый объект на экране. Анимация с помощью CSS или JavaScript для передвижения объектов в некоторых случаях может быть более плавной, чем сделанной через Canvas, но это зависит от реализации вашего браузера.
Что? Где? Когда?Итак, когда следует использовать Canvas вместо SVG, CSS или элементов DOM? Ну, Canvas по уровню ниже, чем другие, так что у вас больше контроля над рисованием и тратится меньше памяти, но взамен нужно писать больше кода. Используйте SVG, когда у вас имеются фигуры, которые вы хотите отобразить на экране, как на карте сделанной в Adobe Illustrator. Используйте CSS или DOM-анимацию, когда у вас есть большие статические области, которые вы хотите анимировать или желаете использовать трёхмерные преобразования. Для схем, графиков, динамических диаграмм и, конечно, видеоигр, Canvas - наилучший выбор. В дальнейшем мы обсудим несколько библиотек, которые позволяют делать вам больше штук, ориентированных на векторы и объекты, используя Canvas.
Прежде чем двигаться дальше, хочу пояснить, что когда я говорю о Canvas, то подразумеваю двумерный API. Также существует трёхмерный API в работах называемых WebGL. Я не собираюсь о нём рассказывать, потому что он всё ещё находится в разработке и браузеры поддерживают его довольно плохо. Также этот по существу OpenGL от JavaScript находится на более низком уровне чем Canvas и гораздо сложнее в использовании. Когда WebGL станет более зрелым, мы вернёмся к нему в следующих главах.
Поддержка в браузерахИ, наконец, прежде чем мы углубимся в работу с Canvas, давайте поговорим о том, где вы можете его использовать. К счастью Canvas это теперь стабильный API и большинство современных браузеров поддерживают его в некоторой мере. Поддерживает даже Internet Explorer начиная с версии 9 и очень хорошо.
| 9 | 10 | 9 | 3 | 4 |
Большинство мобильных платформ поддерживают Canvas, потому что в основном они основаны на WebKit, который уже давно имеет хорошую поддержку. Я знаю, что поддерживает WebOS, iOS, Android. Считаю, что BlackBerry тоже, по крайней мере, на PlayBook. Windows Phone 7 не поддерживает, но это может измениться в будущем обновлении.
| iOS | webOS | Android | BlackBerry | Windows Phone 7 |
| все | все | 2 | PlayBook и OS 6.0 |
Пока не все мобильные устройства содержат полную или быструю поддержку Canvas, поэтому позже мы рассмотрим, как оптимизировать наш код для мобильных устройств.
Простое рисованиеКак я уже говорил ранее, Canvas - это просто API. Если вы уже делали работу с программированием на Flash или Java 2D, то это должно показаться довольно знакомым. Вы получаете указатель на графический контекст, устанавливаете некоторые свойства, такие как цвет текущей заливки или контура и затем рисуете несколько фигур. Вот некоторые примеры.
В данном примере мы устанавливаем текущий цвет красным и рисуем прямоугольник. Перетащите мышью числа в коде для изменения значений и посмотрите, как это влияет на прямоугольник.
Ctx.fillStyle = "red"; //x, y, ширина, высота ctx.fillRect(20 ,30 ,40 ,50 );
Вот ещё один.
C.fillStyle = "#ccddff"; c.beginPath(); c.moveTo(50,20); c.lineTo(200,50); c.lineTo(150 ,80 ); c.closePath(); c.fill(); c.strokeStyle = "rgb(0,128,0)"; c.lineWidth = 5 ; c.stroke();
В этом примере мы устанавливаем текущий цвет заливки, создаём контур, а затем заливаем и обводим его. Следует отметить, что контекст отслеживает цвет заливки и цвет обводки отдельно. Также обратите внимание на разные формы указания цвета. fillStyle и strokeStyle может быть любым корректным цветом из CSS, таким как шестнадцатеричным, названием или функцией rgb() .
КонтурыCanvas напрямую поддерживает только прямоугольник. Чтобы нарисовать любую другую фигуру необходимо сделать это самостоятельно с помощью контуров. Контуры это фигуры, созданные кучей прямых или изогнутых отрезков линий. В Canvas вы должны вначале определить контур через beginPath() , затем залить его или использовать как маску. Вы определяете каждый отрезок такими функциями как moveTo() , lineTo() и bezierCurveTo() . В данном примере фигура рисуется с помощью moveTo() , затем идёт кривая Безье и несколько линий. После создания контура он заливается и обводится.
C.fillStyle = "red"; c.beginPath(); c.moveTo(10,30); c.bezierCurveTo(50 ,90 ,159 ,-30 ,200,30); c.lineTo(200,90); c.lineTo(10,90); c.closePath(); c.fill(); c.lineWidth = 4; c.strokeStyle = "black"; c.stroke();
Пара слов о системе координат. Canvas ведёт отсчёт от левого верхнего угла с осью у, которая ведёт вниз. Это традиционно для компьютерной графики, но если вы хотите указать другую точку отсчёта, то можете сделать это через трансформацию, о которой мы расскажем позже. Ещё одна важная вещь - спецификация определяет координаты в левом верхнем углу пикселя. Это означает, что если вы рисуете вертикальную линию шириной в один пиксель, начиная с 5.0, то на самом деле это охватывает половину соседних пикселей (от 4.5 до 5.5). Чтобы обойти это сместите ваши координаты по оси х на 0.5. Тогда это даст вам линию, которая идёт с 5.0 до 6.0. В качестве альтернативы вы можете использовать ширину линии, указав 2 или 4.
Canvas может выводить изображения через функцию drawImage .
Есть несколько форм drawImage . Вы можете нарисовать изображение непосредственно на экране в обычном масштабе или растянуть и обрезать его, как вам нравится. Обрезка и растяжение изображений может быть очень удобны для создания спецэффектов в играх, потому что интерполяция изображения часто работает намного быстрее, чем другие типы масштабирования.
Ctx.drawImage(img, 0,0); //normal drawing ctx.drawImage(img, //draw stretched 0,0,66,66, //source (x,y,w,h) 100,0,103 ,100 //destination (x,y,w,h)); ctx.drawImage(img, //draw a slice 20 ,10 ,20 ,20 , //source coords (x,y,w,h) 250,0,250,50//destination coords (x,y,w,h));
Попробуйте поменять переменные, чтобы увидеть, как работает растяжение и обрезка. Чтобы растянуть изображение вы должны указать исходные и конечные координаты. Исходные координаты говорят drawImage какие пиксели взять из изображения. Поскольку рисунок выше имеет размеры 67x67 пикселей, то используя 0,0,66,66 мы отобразим изображение целиком. Конечные координаты говорят drawImage куда поместить пиксели на экране. Изменяя значения w и h можно растянуть и сжать изображение.
Обрезка работает аналогично, но используются исходные координаты, которые не охватывают изображение целиком. Когда вы берёте фрагмент изображения убедитесь, что вы не выходить за его исходные границы, иначе изображение исчезнет.
ТекстCanvas может также рисовать текст. Атрибуты шрифта такие же, как и в аналоге CSS, так что вы можете установить стиль, размер и семейство шрифта. Обратите внимание, что функция fillText(строка,x,y) использует базовую линию текста, а не его верхний край. Если вы поместите ваш текст в 0,0, то он нарисуется за пределами верхней части экрана. Так что опустите y на соответствующее значение.
Ctx.fillStyle = "black"; ctx.font = "italic "+96 +"pt Arial "; ctx.fillText("this is text", 20 ,150 );
ГрадиентыCanvas может заливать фигуры градиентом вместо цвета. Вот линейный градиент:
200 ,0 ); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(0,0,400,200);
Важно отметить, что градиент закрашивается в той же системе координат, какой рисуется фигура, а не внутренних координат фигуры. В данном примере фигура рисуется в 0,0. Если мы изменим фигуру на 100,100, то градиент будет по-прежнему находиться в начале экрана, так что окажется меньше градиента, вроде этого:
Var grad = ctx.createLinearGradient(0,0,200 ,0 ); grad.addColorStop(0, "white"); grad.addColorStop(0.5, "red"); grad.addColorStop(1, "black"); ctx.fillStyle = grad; ctx.fillRect(100,100,400,200);
Итак, в случае, когда вы считаете, что заливаете фигуру градиентом, но видите единственный цвет, то это может быть потому, что ваши координаты выключены.
Вот и все основы рисования. Давайте остановимся на достигнутом и выполним несколько упражнений в следующей главе. У вас уже должен быть установлен браузер и текстовый редактор. Я рекомендую использовать Chrome , поскольку он содержит хорошие инструменты отладки и jEdit , потому что он бесплатный и кросс-платформенный. Но вы можете использовать браузер и редактор по своему усмотрению.
What You"ll Be Creating
В ранних уроках мы описывали . В этом уроке я покажу как использовать JavaScript и HTML5 чтобы отобразить графически данные используя графики.
Простой способ создать графики используя код, к примеру используя полную библиотеку графиков из CodeCanyon.
Инфографика библиотеки графиков из CodeCanyonНо если вы хотите знать что нужно для того чтобы создать библиотеку как эту, этот урок для вас.
Линейные графики очень востребовательный инструмент, который используют для представления числовых данных. От финансовых отчётов в презентациях PowerPoint до инфографиков, линейные графики используются в отображении числовых данных, которые легко понять.
Линейные график представляют числовые бары использования данных, которые являются прямоугольниками или с их шириной или с высотой, пропорциональными числовыми данными, которые они предоставляют.
Существует много типов линейных графиков:
Давайте посмотрим на компоненты, которые составляют гистограмму независимо от ее типа:
Теперь мы знаем компоненты гистограммы, а теперь посмотрим, как мы сможем написать код JavaScript для прорисовки диаграммы вроде этой.
Рисуем диаграмму используя JavaScript Настраиваем проект JavaScriptДля старта прорисовки с использованием JavaScript и HTML5 мы нужно настроить проект вот так:
Мы будем выполнять всё очень просто и добавим следующий код во внутрь index.html:
У нас есть элемент с id myCanvas , поэтому мы можем ссылаться на него в нашем коде JavaScript. Тогда мы загрузим наш скрипт с помощью тега .
Добавьте следующий код в файл script.js:
Var myCanvas = document.getElementById("myCanvas"); myCanvas.width = 300; myCanvas.height = 300; var ctx = myCanvas.getContext("2d");
Добавляем несколько вспомогательных функцийРисование гистограммы требует только знания, как потянуть два элемента:
Создадим вспомогательную функцию для этих двух элементов. Мы добавим функцию в наш файл script.js .
Function drawLine(ctx, startX, startY, endX, endY,color){ ctx.save(); ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); ctx.stroke(); ctx.restore(); }
Функция drawLine предлагает шесть параметров:
Мы модифицируем настройки цвета для strokeStyle . Это определит цвета, которые будут использоваться в прорисовке линии. Мы используем ctx.save() и ctx.restore() , поэтому мы не затронем цвета, использующиеся за пределами этой функции.
Мы нарисуем линию с названием beginPath() . Это проинформирует нарисованному контексту, что мы начали рисовать что-то новое на странице. Мы используем moveTo() для выбора стартовой точки, с названием lineTo() для указания конечной точки и тогда сделать актуальную прорисовку под названием stroke() .
Другая дополнительная функция нужна нам для прорисовки диаграммы, которая является цветным прямоугольником. Добавим его в script.js:
Function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){ ctx.save(); ctx.fillStyle=color; ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height); ctx.restore(); }
Функция drawBar предлагает шесть параметров:
Теперь у нас есть дополнительные функции, давайте перенесём в информационную модель гистограммы. Все типы диаграмм имеют информационную модель за ними. Информационная модель построена на числовых данных. Для этого урока мы будем использовать серию данных категорий и их связанные числовые значения представляющих количество виниловых записей из моей коллекции записей, сгруппированных по музыкальным жанрам:
Мы можем изобразить это в JavaScript в форме объекта. Давайте добавим это в файл script.js:
Var myVinyls = { "Classical music": 10, "Alternative rock": 14, "Pop": 2, "Jazz": 12 };
Реализуем компонент гистограммыДавайте реализуем компонент, который делает актуальную прорисовку нашей гистограммы. Мы сделаем это через добавление объекта JavaScript в наш script.js:
Var Barchart = function(options){
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function(){
var maxValue = 0;
for (var categ in this.options.data){
maxValue = Math.max(maxValue,this.options.data);
}
var canvasActualHeight = this.canvas.height - this.options.padding * 2;
var canvasActualWidth = this.canvas.width - this.options.padding * 2;
//drawing the grid lines
var gridValue = 0;
while (gridValue
