HTML5 Canvas что это такое


Оглавление (нажмите, чтобы открыть):

HTML 5 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 , чтобы потом обратиться к нему в JavaScript, также необходимо задать атрибуты width и height для определения ширины и высоты элемента canvas .

Для рисования внутри элемента canvas , нужно использовать JavaScript. Сначала нужно найти созданный тег canvas с помощью функции getElementById , а потом инициализировать нужный контекст. Как только это будет сделано, можно начинать рисование на канве, используя доступные API-команды выбранного контекста. Следующий скрипт рисует простой прямоугольник на канве (просмотреть пример использования Canvas):

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:

Этот пример приведет к следующему результату:

Окружность и круг

Чтобы нарисовать окружность, нужно выполнить такой код:

Кривые Безье

Для создания кривых Безье в HTML5 Canvas можно использовать метод bezierCurveTo() . Кривые Безье задаются с помощью начальной точки, двух контрольных точек и конечной точки. В отличие от квадратичных кривых, кривые Безье в HTML 5 Canvas определяются двумя контрольными точками вместо одной, позволяя создавать кривые с более сложным очертанием.

Метод bezierCurveTo() выглядит следующим образом :

Пример рисования кривой Безье в HTML 5 Canvas:

Исполнение такого кода приведет к следующему результату:

Схема построения кривой Безье:

Контуры

Контуры Canvas позволяют рисовать фигуры любой формы. Сначала нужно нарисовать «каркас», а потом можно использовать стили линий или заливки, если это необходимо. Чтобы начать рисование контура, используется метод beginPath() , потом рисуется контур, который можно составить из линий, кривых и других примитивов. Как только рисование фигуры окончено, можно вызвать методы назначения стиля линий и заливки, и только потом вызвать функцию closePath() для завершения рисования фигуры.

Следующий код демонстрирует рисование треугольника:

Этот пример будет отображен в браузере следующим образом:

Вставка изображений в Canvas

Метод drawImage позволяет вставлять другие изображения ( img и canvas ) на канву. В браузере Opera также существует возможность рисования SVG-изображений внутри элемента canvas . drawImage довольно сложный метод, который может принимать три, пять или девять аргументов:

  • Три аргумента: Базовое использование метода drawImage включает один аргумент для указания изображения, которое необходимо вывести на канве, и два аргумента для задания координат.
  • Пять аргументов: Используются предыдущие три аргумента и еще два, задающие ширину и высоту вставляемого изображения (в случае если вы хотите изменить размеры изображения при вставке).
  • Девять аргументов: Используются предыдущие пять аргументов и еще четыре: два для координат области внутри исходного изображения и два для ширины и высоты области внутри исходного изображения для обрезки изображения перед вставкой в Canvas.

Спецификация HTML 5 объясняет эти аргументы следующим образом:

Следующий пример показывает использование всех трех вариантов обращения к этому методу:

Так будет выглядеть этот пример в браузере:

Манипуляции над пикселями

2D Context API предоставляет три метода, которые позволяют выполнять попиксельное рисование: createImageData , getImageData и putImageData .

Пиксели хранятся в объектах типа ImageData . Каждый объект имеет три свойства: width , height и data . Свойство data имеет тип CanvasPixelArray и содержит массив элементов размером width*height*4 байт; это означает, что каждый пиксель содержит цвет в формате RGBA. Пиксели упорядочены слева направо, сверху вниз, построчно.

Чтобы лучше понять этот механизм, рассмотрим пример отрисовки блока из красных пикселей.

Примечание: пока не все современные браузеры реализуют метод createImageData . В таких браузерах необходимо получать объект ImageData , используя метод getImageData (Пример кода для таких браузеров).

Благодаря возможностям метода ImageData можно сделать очень многое. Например, можно отфильтровать изображение или создать математическую визуализацию (фракталы и т.п.). Следующий код показывает, как создать простой фильтр для инвертирования цвета изображения:

Ниже изображен результат работы фильтра инверсии цвета, примененного к изображению.

Текст

В настоящее время Text API доступен только в последних сборках движка WebKit, а также в Firefox 3.1 и выше.

Следующие свойства текста доступны для объекта контекста:

  • font : Определяет шрифт текста, так же как свойство font-family в CSS)
  • textAlign : Определяет горизонтальное выравнивание текста. Допустимые значения: start, end, left, right, center. Значение по умолчанию: start.
  • textBaseline : Определяет вертикальное выравнивание текста. Допустимые значения: top, hanging, middle, alphabetic, ideographic, bottom. Значение по умолчанию: alphabetic.

Существуют два метода для вывода текста: fillText и strokeText . Первый отрисовывает текст, заполняя его заливкой стиля fillStyle , другой рисует обводку текста, используя стиль strokeStyle . Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.

Свойства выравнивания текста влияют на позиционирование текста относительно координат его вывода (x,y).

Так этот пример будет выглядеть в браузере:

Shadow API предоставляет четыре свойства:

  • shadowColor : Определяет цвет тени. Значения допустимы в том же формате, что и в CSS.
  • shadowBlur : Определяет степень размытия тени в пикселях. Эффект очень похож на гауссово размытие в Photoshop.
  • shadowOffsetX и shadowOffsetY : Определяет сдвиг тени в пикселях (x, y).

Так будет выглядеть пример тени в браузере:

Градиенты

Свойства fillStyle и strokeStyle также могут иметь объекты CanvasGradient вместо обычных цветов CSS — это позволяет использовать градиенты для линий и заливок.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient . Первый метод создает линейный градиент, а второй — радиальный градиент.

Как только создан объект градиента, можно добавлять в него цвета с помощью метода addColorStop .

Следующий пример показывает, как использовать градиенты:

Ниже показан более сложный пример, в котором использованы линейный градиент, тени и текст:

Примеры использования Canvas

Следующие проекты реализуют множество разных возможностей Canvas:

Выводы

Canvas — одна из самых интересных возможностей HTML 5, которую уже можно использовать во многих современных браузерах. Canvas предоставляет возможности для создания игр и пользовательских интерфейсов совершенно нового уровня. 2D context API включает в себя множество функций, часть из которых не была описана в этой статье, но я надеюсь, вы получили все знания, необходимые для начала работы с Canvas.

10 крутых примеров работы HTML5 Canvas

Холст — интересная особенность в HTML5 Canvas которая позволяет рисовать разнообразные вещи в браузере с помощью технологии Java. Например его можно использовать для управления фотографий, рисовать и анимировать разнообразные формы и фигуры, а так же воспроизводить видео. Но это ещё далеко не придел.

По этому, чтобы продемонстрировать на что возможна HTML5, тут представлена небольшая подборка различных и красивых примеров, которые точно Вам понравятся.

Радужный дождь

Действительно удачный пример анимации работающей на HTML5 Canvas, как будто с неба льёт радужный дождь. Очень красиво смотрится.

Частицы

Интересный эффект на HTML5 Canvas, который имитирует движение мелких частиц из букв, очень красивая и своеобразная анимация, которую можно использовать практически на любых сайтах.


Анимированные круги

Интересный и не сильно сложный эффект работающий на HTML5 Canvas. Тут несколько кругов, которые плавно меняют свою форму, таким образом получается красивый визуальный эффект.

Геометрическая анимация

Ну что сказать, это потрясающий и красивый эффект геометрической анимации на которую можно смотреть вечно, так как выгляди это очень здорово.

Анимационные шары

Плавно двигающиеся шары, замечательный пример который можно сделать на HTML5 Canvas. Этот эффект будет круто и современно смотреться на большинства сайтах.

Созвездие

Тут созданы случайно двигающиеся звёзды, а при наведении мыли они соединяются линиями. Очень красиво сделанное демо.

Молния

Отличная и удачная имитация молнии с помощью HTML5 Canvas. Смотрится очень достойно и потрясающе!

Радужный осьминог

Сделанные радужные линии из небольших кругом, движутся с плавной анимацией, таким не сложным образом получается такой красивый визуальный эффект.

Найди курсор

Этот пример отслеживает расположение курсора указывая на него стрелками

Механическая трава

Интересный пример, который реагирует на движения курсора, дорисовывая линии. Очень интересно и необычно придумано.

Canvas, основы работы с помощью JavaScript

Добрый день, уважаемые читатели.

Сегодня я бы хотел с вами поделиться знаниями о таком интересном html5 элементе, как canvas. Этот новый элемент позволяет творить невероятные чудеса в окне браузера.

Что такое canvas и зачем он нужен?

Canvаs (холст) — элемент HTML5 для создания растрового двухмерного изображения. Обычно используется совместно с javascript.

Ширину и высоту canvas можно изменять.

Используется в основном для отрисовки графиков и игровый элементов в браузерных играх, вставки видео, создания полноценного плеера.

Canvas так же используется в WebGL для аппаратного ускорения 3D графики. В результате можно создавать даже 3D игры, работающие в окне браузера.

Создание нашего canvas

Создается canvas путем обычной вставки тега в html-код. Далее через обычный javascript мы получаем элемент и содержимое canvas (строка 10, 11) и рисуем обведенный прямоугольник, который растягивается на всю ширину и высоту canvas.

Примитивы в canvas

В canvas можно рисовать такие геометрические элементы, как:

  1. Прямоугольники
  2. Линии
  3. Окружности, дуги
  4. Различные кривые, эллипс

Прямоугольники

Самая простая фигура для canvas — прямоугольник. Чтобы его нарисовать нам нужна всего одна строчка кода.

Есть еще 2 варианта для рисования прямоугольников:

Ниже приведен пример использования этих 2-х способов:

В результате мы нарисовали большой черный прямоугольник и вырезали область из точки (50, 50) размером 300 пикселей по ширине и 200 пикселей по высоте. Ниже представлено, как это будет выглядеть.

Более интересный пример:

Ниже пример, как это выглядит:

Линии, окружности, дуги

Рисование фигур из линий происходит немного сложней. Здесь используется 4 метода:

Так же нам понадобятся следующие методы для рисования линий:

Ниже приведен пример использования данных методов:

Вот такая замечательная звезда у нас получилась:

Кривая Безье

Нарисовать любую фигуру так же можно с помощью кривых Безье. Для этого используется 2 метода quadraticCurveTo, bezierCurveTo. Для кривых Безье должна быть задана начальная точка, от которой будет прорисовываться фигура.

Все, вроде, хорошо, но вот постоянно рисовать черным цветом не очень интересно. Разнообразим!

Цвет линий и заливки в canvas

Для задания цвета есть 2 свойства: fillStyle и strokeStyle. Задать цвет можно несколькими вариантами:

Попробуем что-нибудь раскрасить, используя разные способы задания цвета:

На этом пока все.

Спасибо за внимание! Жду вас в следующей статье!

Подписываемся на рассылку ��

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 19.02.2014

Введение в Canvas

В этой статье мы познакомим вас c новым элементом HTML5 — canvas, который позволяет рисовать различные объекты и отображать в самых современных браузерах. Прочитав данный урок, вы узнаете, как получить доступ к элементу canvas, рисовать фигуры, изменять цвета, и стирать объекты. Приобретайте путёвку в современный мир Web технологий.

Я надеюсь, вам понравится эта серия уроков. Она рассчитана на тех, кто имеет какой-то опыт работы в JavaScript, и совсем ничего не знает насчёт элемента canvas. Если вы новичок в JavaScript, не переживайте, вы приобретёте некоторые знания, прочитав данную статью.

Знакомимся с элементом Canvas

Использовать элемент canvas очень просто

Когда вы слышите слово canvas, то вы сразу же думаете о новом HTML5 элементе с одноимённым названием. Технически, это только половина всей правды, но давайте не будем сейчас говорить об этом. Элемент canvas — это нововведение для всех браузеров.

Для того чтобы воспользоваться элементом canvas, необходимо просто создать соответствующий HTML тег, а затем определить ширину и высоту.

Но это конечно же далеко не всё. Код, написанный выше поместит на вашу страницу canvas с прозрачным фоном. Внимание: контент внутри тега canvas будет отображён только в том случае, если ваш браузер является устаревшим и не поддерживает данную функциональность.

Поддержка

Этот элемент только для самых современных браузеров

Должен отметить, что самые современные браузеры поддерживают данный элемент, даже последний Internet Explorer.

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Andro >К слову сказать, вы можете активировать данный элемент и в ранних версиях 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. Пример:

Заметьте: в этом примере мы применяем jQuery, но только после того, как страница полностью загрузится. Для этих целей вы можете в полной мере пользоваться вашим любимым JavaScript фрэймворком или поместить скрипт в конец документа.

В результате вызова метода getContext, переменная ctx теперь будет ссылаться на двумерный контекст. Это означает, что теперь при помощи этой переменной вы можете начать рисовать фигуры на элементе canvas. Круто, да?!

Рисуем квадраты

Теперь, когда у нас есть доступ к двумерному контексту, вы можете смело начинать пользоваться всеми функциями вышеупомянутого API. Одной из самых часто используемых функций является fillRect, которая создаёт квадраты чёрного цвета (по умолчанию).

Добавьте следующий код, используя переменную ctx, о которой мы говорили перед этим:

Этот код нарисует чёрный квадрат в левой верхней стороне холста. Примерно вот так вот:

Поздравляю! Вы только что нарисовали вашу первую фигуру в HTML5 элементе canvas. Каковы ощущения?

Заметьте: вы скорее всего уже смекнули, что на самом деле для рисования квадрата используется JavaScript. Это происходит потому, что в функциональности элемента canvas не предусматривается подобного метода (для рисования квадрата). На самом деле квадрат — это тот же самый прямоугольник, у которого все стороны равны.

В методе fillRect может быть прописано 4 параметра:

  • Первый — это позиция по оси x;
  • Второй — это позиция по оси y;
  • Третий — это параметр, отвечающий за ширину;
  • Четвёртый — это высота.

Если расписать прототип метода в псевдокоде, то он будет выглядеть следующим образом:

Хорошая новость заключается в том, что вы не ограничены в функционале, касающемся заливки. Уточню. Вы можете рисовать прямоугольник с прозрачной заливкой и цветной рамкой.Для этого в JavaScript API предусмотрена специальная функция strokeRect:

Данная функция принимает такой же набор аргументов, как и fillRect. В результате вы получите ещё один квадрат:

Просто. Элегантно. И ещё раз просто! Теперь вы поняли принцип, по которому работает элемент canvas. Все остальные методы подобны этим двум. Их использовать так же просто. Если вам кажется это чем-то примитивным, то не переживайте. Все эти элементы в совокупности могут творить чудеса.

Рисование по схеме

Помимо прямоугольников (которые могут быть нарисованы одним методом из API), вы так же можете рисовать фигуры по собственной схеме. Благодаря схемам вы можете создавать прямые или изогнутые линии, а так же более сложные фигуры.

Чтобы создать полноценную схему, вам необходимо будет воспользоваться следующими методами из API:

  • beginPath: начало схемы;
  • moveTo: метод для создания точки;
  • lineTo: рисует линию от точки до точки, которые были созданы методом moveTo, или до точки от прошлой линии, нарисованной методом lineTo;
  • closePath: завершить схему.
  • fill: заполнить фигуру цветом.
  • stroke: создать контур.

Попробуйте следующий пример:

Данный код нарисует треугольник чёрного цвета:

Те же самые принципы вы можете использовать для рисования фигур, которые вам понадобятся. В следующем уроке, посвящённом данной теме, мы поговорим о более продвинутом рисовании фигур, таких как овалы, кривая Безье и др.

Стоит сказать об этом именно сейчас: рисование по схеме применяется для создания более сложных фигур чем прямоугольники.

Изменение цветов

Итак, всё что мы рисовали до сих пор, будь то прямоугольник или треугольник, окрашивалось в чёрный цвет. Круто! Однако, существует множество функций в JavaScript API, которые позволят вам с лёгкостью изменить цвет фигуры, которую вы рисуете. Вашему вниманию представляю fillStyle и strokeStyle.

Объявлять тут в принципе нечего, поэтому давайте сразу же применим их на практике:

Данный код окрасит квадрат в красный цвет:

Или вы можете изменить цвет рамки квадрата:

Вот вы и научились применять данные методы:

Методы fillStyle и strokeStyle удобны тем, что они используют те же цвета, что и в привычном вам CSS. Это значит, что вы можете использовать RGB, RGBA, HSA, специальные слова (“red”) и шестнадцатеричные значения.

Сразу стоит отметить, что изменение цвета не приводит к преобразованию уже существующего содержания элемента canvas. К примеру, если вы нарисовали черный прямоугольник, затем создали наполнитель для красного цвета, а потом нарисовали ещё один прямоугольник, то первая фигура останется чёрной.

Изменение толщины линий

Теперь плавно перейдём от изменения цветов к изменению значения толщины линий. Для данного функционала существует ещё один метод из JavaScript API — lineWidth.

Можете добавить данный код в прошлый пример:

И вот какой у вас получится результат:

Такой же принцип вы можете применить со схемами. К примеру, вы можете изменить пример с треугольником:

И вот что у вас получится:

Также в JavaScript API, существует ещё метод, который позволят вам изменить вид линий. К примеру, lineCap изменяет вид отображения конца линии, а lineJoin изменят отображение углов. Более подробную информацию вы можете найти в спецификации.

Стираем объекты из Canvas

Последняя вещь, которую я хочу вам сегодня показать – это стирание объектов. Вы уже знаете, как нарисовать фигуру. Теперь пришло время узнать как от неё избавиться 🙂

В принципе тут всё так же просто; вам нужно всего-навсего воспользоваться очередным методом из JavaScript API. Этот метод называется clearRect. Его задача заключается в том, чтобы сделать каждый указанный пиксель полностью прозрачным.

В этом примере на canvas 500px в ширину и 500px в высоту. Для очищения всей площади, вам необходимо сделать следующее:

В этом примере скорее всего не нужно подтверждать работу кода скриншотом, так как вы ничего не увидите. Квадрат действительно был нарисован, а затем мгновенно стёрт.

Заметьте: аргументы для метода clearRect точно такие же, как и для fillRect; x, y, ширина и высота.

Если вы не определились с высотой и шириной, то можете писать и так:

Стирание небольших фрагментов

Для того чтобы стереть небольшой фрагмент, вам не обязательно зачищать всю площадь элемента canvas. Вы без проблем можете стереть необходимую вам область. Представьте, что у вас нарисовано 2 квадрата, один из которых вы хотите стереть:

На данный момент картина такая:

Вы без проблем можете стереть черный квадрат, а красный оставить на месте при помощи метода clearRect:

Заметьте, что данные должны совпадать с теми, что вы указывали при создании элемента. На самом деле данный метод просто изменяет прозрачность каждого пискеля:

Довольно-таки просто, не так ли? Вы нечасто будете стирать элементы при рисовании, однако эти знания понадобятся вам, когда мы будем учиться делать анимацию.

Идём в ногу со временем

Canvas прост в использовании и изучении

Надеюсь, вы убедились в том, что canvas — это очень перспективный элемент веб страницы. Он позволяет создавать вам изображения, используя чистый код без никаких плагинов. Он прост в использовании и изучении, и на самом деле в умелых руках может превратиться во что-то очень оригинальное.

В следующей статье, мы рассмотрим некоторые продвинутые техники работы с элементом canvas, такими как рисование овалов, кривых линий и других вещей. Если этого будет недостаточно, то в дальнейшем мы расскажем вам, как трансформировать объекты (поворачивать, уменьшать, увеличивать), как работать с изображениями, а так же поработаем с анимацией. Вам будет очень интересно, можете поверить мне на слово.

А сейчас, я надеюсь, вы получили много полезной информации, которая позволит вам получить общее представление об canvas. Данный элемент — это фантастическая технология, которая позволит вам реализовать все фантазии, которые хранятся у вас в голове.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
Перевел: Станислав Протасевич
Урок создан: 28 Марта 2011
Просмотров: 59850
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем


Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

Часть 4. Завершающий штрих – Canvas

Возможности тега Canvas

Серия контента:

Этот контент является частью # из серии # статей: Основы HTML5

Этот контент является частью серии: Основы HTML5

Следите за выходом новых статей этой серии.

Автор HTML5-материалов сочетает в одном лице бесстрашного проектировщика и рационального разработчика. Цель его деятельности состоит в построении эффективных RIA-приложений (Rich Internet Application — насыщенные Интернет-приложения), особенно таких, которые обладают насыщенными пользовательскими интерфейсами. Говоря о построении эффективных приложений, я в первую очередь имею в виду создание системных и систематических усовершенствований, которые «цифровым образом» обеспечивают диалог между владельцем сайта, агентами этого владельца и посетителями сайта.

Совершенствование квалификационных навыков по данной тематике

Данная статья является частью учебной программы по совершенствованию квалификационных навыков. См. Основы HTML5.

RIA-приложения представляют собой одновременно источник и движущую силу надлежащих пользовательских возможностей, поэтому они являются важнейшим компонентом каждого успешного сетецентрического предприятия. По своей природе сетецентрические мероприятия всегда являются коллективными — до той или иной степени. Продуктивный подход к цифровому сотрудничеству необходим предприятию для достижения успеха на любом уровне, включая маркетинг и менеджмент. Конечные результаты определяются эффективностью, с которой сайт удовлетворяет потребность своих посетителей в качественном продукте.

Как вы уже убедились, технологии HTML5 специально созданы для мира «one web world», отличительными особенностями которого являются межплатформенные возможности, конвергентные коммуникации, унифицированный язык, вездесущая компьютеризация и открытые системы. Первые три части данной серии статей были посвящены таким темам, как семантические теги, надлежащие методы написания кода, роль ввода информации в жизненно важном процессе конверсии посетителей, наилучшие методики управления сайтами. Все эти темы формируют фундамент для RIA-приложений — организованным и рациональным образом. Общая идея всех статей состоит в том, что создание насыщенных пользовательских возможностей и управление ими жизненно необходимо владельцам Web-сайта для достижения своих «производственных» целей. HTML5-тег Canvas играет важнейшую роль в создании эффективных RIA-приложений.

Часто используемые сокращения
  • 2D: Two-dimensional (двухмерный).
  • Ajax: Asynchronous JavaScript + XML (технология Ajax).
  • API: Application programming interface (Интерфейс прикладного программирования, API-интерфейс).
  • HTML: Hypertext Markup Language (язык гипертекстовой разметки, язык HTML).
  • HTML5: HTML, версия 5.
  • UI: User interface (Интерфейс пользователя).

Что такое Canvas

HTML5-тег Canvas является исключительно полезным инструментом для рисования и анимации. Тег Canvas использует технологию JavaScript для рисования графических объектов непосредственно на Web-странице. Canvas представляет собой прямоугольную область, задаваемую и контролируемую разработчиком. Эта область позволяет осуществлять допускающую использование сценариев визуализацию двухмерных 2D-форм и растровых изображений.

Тег Canvas идеально подходит для создания впечатляющих визуальных материалов, которые улучшают пользовательские интерфейсы, диаграммы, фотоальбомы, схемы, графики, анимированные материалы и встраиваемые графические приложения. Тег Canvas имеет несколько методов для рисования маршрутов, прямоугольников, кругов и символов.

Координаты Canvas

Обязательным условием для создания изображений в среде Canvas является знакомство с координатной сеткой (координатной плоскостью). Измерения пространственной области по ширине и высоте задаются в пикселах. В среде Canvas используются координаты x и y . Верхний левый угол области Canvas имеет координаты x=0, y=0 .

По умолчанию размеры прямоугольной области Canvas имеют ширину 300 пикселов и высоту 150 пикселов, но вы можете задать точные размеры тега Canvas посредством указания его ширины и высоты. Схема на рисунке 1 демонстрирует организацию координатного пространства по x и y .

Рисунок 1. Координаты Canvas

На рисунке 1 показана область Canvas размером 100 х 100 пикселов.

  • Левый верхний угол имеет координаты x=0, y=0 .
  • Значение координаты x увеличивается по горизонтали, а значение координаты y увеличивается по вертикали.
  • Правый нижний угол имеет координаты x=100, y=100 .
  • Центральная точка имеет координаты x=50, y=50 .

Начало работы

Чтобы поместить что-либо в зону Canvas, сначала нужно задать область Canvas в HTML-файле. Чтобы нарисовать свои изображения, вы должны создать JavaScript-код, который обращается к тегу и коммуницирует с API-интерфейсом HTML5 Canvas.

Базовая структура тега имеет следующий вид:

Тег canvas имеет два собственных атрибута: width (высота) и height (ширина). Кроме того, тег Canvas имеет все ключевые HTML5-атрибуты, такие как class , id и name . Атрибут id используется в показанном выше коде. JavaScript-код использует созданный здесь идентификатор id тега Canvas для обозначения области Canvas, на которой будет осуществляться рисование. JavaScript-код выявляет надлежащую область Canvas с помощью метода document.getElementById() , как показано ниже.

Каждый тег Canvas должен иметь определение контекста, как показано ниже. В настоящее время официальная спецификация распространяется только на 2D-среду.

После идентификации надлежащей области Canvas и указания ее контекста можно приступать к рисованию.

Инструменты рисования, эффекты и преобразования

Рассмотрение тематики HTML5 Canvas в данной статье охватывает различные инструменты рисования, эффекты и преобразования. Инструменты рисования обеспечивают формирование следующих объектов:

  • Линии.
  • Прямоугольники.
  • Дуги.
  • Кривые Безье и квадратичные кривые.
  • Круги и полукруги.

Мы будем использовать следующие эффекты Canvas:

  • Заполнения и мазки.
  • Линейные и радиальные градиенты.

Будут рассмотрены следующие преобразования:

Рисование линий

Чтобы нарисовать линию в среде Canvas, воспользуйтесь методами moveTo() , lineTo() и stroke() . Кроме того, используйте метод beginPath() для восстановления текущего маршрута.

  • context.beginPath();
  • Context.moveTo(x,y);
  • Context.lineTo(x,y);
  • Context.stroke(x,y);

Метод beginPath() начинает новый маршрут. Прежде чем рисовать новую линию с разными субмаршрутами, необходимо применить метод beginPath() для указания новой начальной точки рисования. Когда вы рисуете первую линию, нет необходимости вызывать метод beginPath() .

Метод moveTo() задает начальную точку, в которой должен начинаться новый субмаршрут. Метод lineTo() создает субмаршруты. Внешней вид линии можно изменить с помощью тегов lineWidth и strokeStyle . Тег lineWidth меняет толщину линии, а тег strokeStyle меняет цвет линии.

На рисунке 2 показаны три линии, нарисованные с использованием разных цветов.

Рисунок 2. Область Canvas с линиями разного цвета

Линии на рисунке 2 были созданы с помощью кода, показанного в листинге 1. Синяя линия с закругленными концами создается следующим образом. Сначала указывается необходимость начала нового маршрута: context.beginPath() . Затем используются следующие методы:

  • context.moveTo(50, 50) , помещает начало маршрута в точку с координатами( x=50, y=50 ).
  • context.lineTo(300,50) , специфицирует конечную точку линии.
  • context.lineW >, специфицирует ширину линии.
  • context.strokeStyle = «#0000FF» , специфицирует цвет линии.
  • context.lineCap = «round» , делает концы закругленными.
  • context.stroke() , осуществляет фактическое рисование линии на Canvas.

Все описываемые линии имеют длину по 50 пикселов, хотя и создается впечатление разной длины — это визуальная иллюзия, порождаемая так называемыми «завершителями линий» (line cap). Имеются три возможных типа завершителя:

  • Context.round (синий).
  • Context.square (зеленый).
  • Context.butt (фиолетовый — по умолчанию).

По умолчанию используется завершитель butt. При использовании закругленных или квадратных завершителей длина линии увеличивается на величину, равную ширине этой линии. Например, линия длиной 200 пикселов и шириной 10 пикселов с закругленными или квадратными завершителями будет иметь результирующую длину 210 пикселов, поскольку каждый завершитель добавляет по 5 пикселов на каждом конце линии. Линия длиной 200 пикселов и шириной 20 пикселов с закругленными или квадратными завершителями будет иметь результирующую длину 220 пикселов, поскольку каждый завершитель добавляет по 10 пикселов на каждом конце линии.

Чтобы лучше понять, как осуществляется рисование линий, выполните и измените код на рисунке 1.

Листинг 1. Создание в среде Canvas трех линий разного цвета

Рисование прямоугольников

Для создания прямоугольной области в Canvas имеются три метода:

  • fillRect(x,y,width,height) , рисует закрашенный прямоугольник.
  • strokeRect(x,y,width,height) , рисует контурный прямоугольник.
  • clearRect(x,y,width,height) , очищает заданную прямоугольную область и делает ее полностью прозрачной.


Для каждого из этих трех методов x и y задают положение на Canvas относительно левого верхнего угла прямоугольника ( x=0, y=0 ), а width и height задают ширину и высоту прямоугольника, соответственно.

На рисунке 3 показаны три прямоугольные области, созданные с помощью кода в листинге 2.

Рисунок 3. Прямоугольная область Canvas

Метод fillRect() создает прямоугольник, заполненный цветом по умолчанию (черный). Метод clearRect() создает прямоугольную область в центре первого прямоугольника. Она размещается в центре прямоугольника, сформированного методом fillRect() . Метод strokeRect создает прямоугольник, который имеет только видимую черную границу.

Листинг 2. Код для рисования прямоугольных областей на Canvas

Рисование дуг, кривых, кругов и полукругов

Для рисования кругов и полукругов применяется метод arc() . Метод arc() имеет шесть аргументов:

Аргументы centerX и centerY задают координаты центра круга. Аргумент radius представляет собой радиус, т.е. расстояние по прямой от центра до окружности. Создаваемая дуга будет частью заданного круга. Аргументы startAngle и endAngle представляют собой начальную и конечную точку дуги, соответственно (в радианах). Аргумент anticlockwise имеет тип Boolean. Если этот аргумент имеет значение true , то рисование дуги осуществляется против часовой стрелки; если он имеет значение false , то рисование дуги осуществляется по часовой стрелке.

Чтобы нарисовать круг с помощью метода arc() присвойте начальному углу значение 0, а конечному углу — значение 2*PI , как показано ниже.

Чтобы нарисовать полукруг с помощью метода arc() присвойте начальному углу значение startingAngle + PI , как показано ниже.

Квадратичная кривая

Квадратичная кривая создается с помощью метода quadraticCurveTo() , как показано ниже. Квадратичная кривая задается точкой контекста, контрольной точкой и конечной точкой. Контрольная точка задает кривизну кривой.

Кривая Безье

Кривая Безье имеет начальную и конечную точки, как и квадратичная кривая, но в отличие от нее имеет две контрольные точки.

Кривая Безье создается с помощью метода bezierCurveTo() . Поскольку кривая Безье задается двумя контрольными точками, а не одной, она позволяет создавать более сложные изгибы.

На рисунке 4 показаны (слева направо): дуга, квадратичная кривая, кривая Безье, полукруг и круг.

Рисунок 4. Дуга, кривые и круг

Изображение на рисунке 4 было создано с помощью кода, показанного в листинге 3.

Листинг 3. Код для дуги, кривой и круга

Преобразование: перемещение, масштабирование и вращение

Методы translate() , scale() и rotate() изменяют текущее состояние изображения. Метод translate(x, y) перемещает объекты на Canvas в другую точку координатной сетки. В методе translate(x,y) координаты (x,y) обозначают, соответственно, количество пикселов, на которое следует переместить изображение в направлении x , и количество пикселов, на которое следует переместить изображение в направлении y .

Если в точке ( 15,25 ) вы рисуете изображение с помощью метода drawImage() , то можете использовать метод translate() с аргументами ( 20,30 ), который помещает это изображение в точку ( 15+20, 25+30 ) = ( 35, 55 ).

Метод scale(x,y) изменяет размеры изображения. Аргумент x задает коэффициент масштабирования по горизонтали, а аргумент y задает коэффициент масштабирования по вертикали. Например, метод scale(1.5, .75) создаст изображение, которое по координате x будет больше исходного изображения на 50%, а по координате y составит лишь 75% от размера исходного изображения. Метод rotate(angle) поворачивает объект на заданный угол.

На рисунке 5 показан результат применения методов translate() , scale() и rotate() .

Рисунок 5. Использование преобразований

В листинге 4 показан код, с помощью которого было создано изображение на рисунке 5.

Листинг 4. Код для создания преобразований

Градиенты

Градиент— это заливка, которая переходит от одного цвета к другому, осуществляя смешивание цветов в зонах их пересечения. Canvas поддерживает градиенты двух типов: линейный и радиальный.

Линейный градиент реализуется с помощью метода createLinearGradient() . Метод createLinearGradient(x0,y0,x1,y1) создает градиент вдоль прямой линии, задаваемой двумя точками: (x0,y0) и (x1,y1) , которые являются начальной и конечной точками градиента, соответственно. Этот метод возвращает объект.

Цветовой градиент способен охватывать множество цветов. Метод addcolorStop(offset, color) задает стоп-цвет (color-stop), до которого указанный цвет должен градиентно изменяться с заданным офсетом (offset). Метод addColorStop() позволяет задать офсет от 0 до 1, где начинается переход к следующему цвету. Значение 0 — это офсет на одном конце градиента; значение 1 — это офсет на другом конце градиента. После задания цветового градиента градиентный объект может быть назначен методу fillStyle() . Метод fillText() позволяет рисовать текст с градиентным изменением цвета.

Радиальный градиент — createradialGradient(x0,y0,r0,x1,y1,r1) — сочетает два цвета или более в круговом или коническом шаблоне с помощью шести аргументов:

  • (x0,y0) . Центр первой окружности конуса.
  • r0 . Радиус первой окружности.
  • (x1,y1) . Центр второй окружности конуса.
  • r1 . Радиус второй окружности.

На рисунке 6 показано четыре градиента: линейный градиент, градиент текста, линейный диагональный градиент и радиальный градиент.

Рисунок 6. Примеры градиентов

Изображение на рисунке 6 было создано с помощью кода, показанного в листинге 5.

Листинг 5. Пример кода для формирования градиента

Кадрирование изображения

Вы можете изменять изображения посредством кадрирования его определенных областей. Кадрирование в среде Canvas обеспечивается перегрузкой метода the drawImage() . Метод drawImage() имеет три опции. Вы можете использовать конфигурации с тремя, пятью или девятью аргументами.

Конфигурация с тремя аргументами — drawImage(image, dx, dy) — формирует на Canvas изображение с целевыми координатами ( dx, dy ). Эти координаты задают левый верхний угол результирующего изображения.

Конфигурация с пятью аргументами — drawImage(image, dx, dy, dw, dh) — формирует ширину и высоту целевого изображения. Исходное изображение масштабируется таким образом, чтобы результирующее изображение имело заданные ширину и высоту.

Конфигурация с девятью аргументами — drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) — обрезает исходное изображение до прямоугольной области с началом в точке с координатами ( sx,sy ), которая имеет ширину и высоту ( sw,sh ), а затем масштабирует его таким образом, чтобы результирующее изображение имело ширину и высоту ( dw,dh ), и помещает его на Canvas в точку ( dx,dy ).

На рисунке 7 показано изображение, которое мы подвергнем кадрированию.

Рисунок 7. Кадрирование изображения

Воспользуемся изображением на рисунке 7 и поместим несколько изображений на Canvas. Одно из этих изображений совпадает по размерам с Canvas и используется в качестве фона. Второе изображение, имеющее уменьшенные размеры, накладывается в правой нижней части Canvas. Третье изображение, представляющее собой вырезанную голову Наполеона, накладывается в левом верхнем углу Canvas. Результирующее кадрированное изображение показано на рисунке 8.

Рисунок 8. Итоговое кадрированное изображение

Изображение на рисунке 8 было создано с помощью кода, показанного в листинге 6. Перед исполнением этого кода не забудьте загрузить изображение Napolean.png, которое было использовано в данном примере.

Листинг 6. Код для кадрирования примера изображения

Анимация с использованием изображений на нескольких тегах Canvas

При создании анимаций всегда возникает необходимость работы со слоями. Слои позволяют изолировать компоненты, что существенно упрощает кодирование и отладку, а также повышает эффективность этих операций. API-интерфейс Canvas не имеет слоев, однако мы может создать несколько сред Canvas.

Анимация должна управляться по времени. Таким образом, для создания анимации необходимо иметь доступ к каждому ее кадру. Применительно к анимации API-интерфейс Canvas имеет одно существенное ограничение: после того как изображение нарисовано в среде Canvas, оно остается там в неизменном виде. Чтобы переместить изображение, необходимо повторно нарисовать его.

Для создания анимации выполните следующие шаги.

  1. Создайте среду Canvas для какой-либо фигуры, которая уже была нарисована раньше.
  2. Сохраните состояние Canvas, чтобы гарантировать использование исходного состояния при каждом рисовании кадра.
  3. Выполните необходимые операции по рендерингу кадров.
  4. Если вы сохранили состояние, восстановите его перед рисованием нового кадра.

Управление анимацией может осуществляться двумя способами: с помощью функции setInterval или с помощью функции setTimeout , каждая из которых может быть использована для вызова той или иной функции после истечения заданного периода времени. Функция setInterval исполняет заданный код многократно. Функция setTimeout исполняется всего один раз после истечения отведенного периода времени.

На рисунке 9 показан один кадр анимации пловца с помощью нескольких сред Canvas. Вода находится на одной среде Canvas, а пловец находится на другой среде Canvas.

Рисунок 9. Анимация с использованием изображений на нескольких тегах Canvas

Пловец создается с помощью кода, показанного в листинге 7. Для создания воды используется линейный градиент. Вода имеет четыре оттенка синего цвета, что обеспечивает приемлемую иллюзию воды. Движение пловца создается посредством использования значений positionX и positionY , которые меняют позу изображения. Создание головы пловца осуществляется с помощью метода arc() . Ноги и руки пловца создаются посредством рисования линий и последующего изменения их положений с помощью lineTo() . Изменения туловища осуществляются посредством изменения положения с помощью moveTo(). Поскольку мы имеем дело с анимацией, то, чтобы увидеть движение пловца, необходимо исполнить данный код.

Листинг 7. Пример анимации

Заключение

HTML5-тег Canvas играет центральную роль при создании RIA-приложений на базе браузеров. Он предоставляет практичную среду рисования, базирующуюся на технологии JavaScript и ограниченную лишь воображением разработчика. Эта среда не слишком сложна для освоения. Кроме того, в Интернете имеется множество инструментов поддержки, облегчающих обучение и подготовку, включая краткие инструкции, блоги, онлайновые статьи, видео- и текстовые пособия, типовые приложения.

Возможность изменять тексты и изображения в визуальном режиме и имитировать движение делает Canvas исключительно ценным инструментом. Вне зависимости от того, применяете ли вы Canvas как дизайнер или разработчик, используете ли вы Canvas при построении игровых приложений для мобильных устройств или просто хотите улучшить использование рабочей поверхности экрана, — в любом случае Canvas является важнейшим компонентом возможностей, предоставляемых спецификацией HTML5.

Ресурсы для скачивания

  • этот контент в PDF
  • Изображение Наполеона (Napoleon.zip | 2045 KБ)


Похожие темы

  • Оригинал статьи: HTML5 fundamentals, Part 4: The final touch.
  • Create great graphics with the HTML5 canvas (Создание впечатляющих графических материалов с помощью HTML5 Canvas, developerWorks, февраль 2011 г.). Руководство по разработке графических приемов и процессов.
  • Демонстрация Canvas Pixel Manipulation от организации Safari Dev Centerthat — прекрасный пример использования Canvas для создания эффективных визуальных активов.
  • Раздел HTML Living Standard на сайте организации WHATWG позволяет ознакомиться с состоянием разработки спецификаций HTML5 Canvas.
  • Справочник HTML5 Canvas на сайте W3Schools.com содержит несколько полезных упражнений, помогающих углубить знания по Canvas.
  • Руководство по Canvas на ресурсе MDN Docs — отличное базовое руководство, отражающее опыт разработки организации Mozilla.
  • Let’s Call It A Draw(ing Surface)— инновационное руководство по базовым концепциям HTML5-тега Canvas.
  • Dojo Toolkit— это библиотека JavaScript-модулей с открытым исходным кодом, которая помогает быстро разрабатывать межплатформенные приложения и Web-сайты на базе JavaScript/Ajax.

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

HTML5 Canvas: что это такое?

Что такое canvas HTML5 ?

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение PageRanker.Ru и посвящает эту небольшую, но полезную статью. Прежде чем начинать пробовать свои силы в не легком деле web разработки, рекомендуется уже иметь базовые знания о том что такое HTML5 и с чем едят JavaScript.

Где применяется тег canvas HTML5?

На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в веб-браузерах. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений.

Организация Mozilla Foundation ведёт проект под названием Canvas 3D, целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML элемент canvas.

История создания canvas HTML5

Впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari.

Поддержка canvas в Gecko появилась в версии 1.8 (версия 1.5 браузера Firefox), в Presto с версии 9.0 веб-браузера Opera. В Internet Explorer 9 поддержка canvas реализована только начиная с версии Platform Preview 3. Ранее ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript, под названием ExplorerCanvas

Итак, за работу! Переходим к практике:

«Настройка» холста

У нашего подопытного тега есть всего два атрибута — height и width, высота и ширина соответственно, по умолчанию размер холста 150х300 пикселей.
Стоит отметить что canvas создает область фиксированного размера содержимым которого управляют контексты.
Элементарный пример:

Если сохранить эти несчастные 13 строк в файл и открыть его браузером, то можно будет увидеть область с чёрным прямоугольником, так вот это и есть тот самый холст, на котором нарисован прямоугольник размеры которого равны размерам canvas’а.

Прямоугольники

Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.

Пример иллюстрирующий работу этих функций:

А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на чёрном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску.

Дуги и линии

Рисование фигур составленных из линий выполняется последовательно в несколько шагов:

beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймёт часть ниже. Итак, существуют такие методы как,

Пример ниже показывает действие всего описанного выше:

В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.

Кривые Бернштейна-Безье

Что такое кривые Безье я думаю лучше объяснит Википедия.
Нам доступно две функции, для построения кубической кривой Бизье и квадратичной, соотвестствено:

x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубическо кривой соответственно две дополнительные точки.
Пример двух кривых:

Добавить цвет

Чтобы наше изображение было не только двух цветов, а любого цвета предусмотрено, два свойства

цвет задается точно так же как и css, на примере все четыре способа задания цвета

Возьмём пример с шахматной доской и добавим в него немного цвета:

Задача

Чт о бы усвоить информацию и закрепить прочитанное на практике я всегда ставлю перед собой не большую цель которая бы одновременно охватывала всё прочитанное и одновременно процесс достижения которой было бы интересен мне самому. В данном случае я попытаюсь отрисовать уровень одной из моих самых любимых в детстве игр. Собственно за не имением времени — добавлять жизнь на него я не буду, а сделаю максимально понятный код охватывающий практически всё то что сегодня здесь описал.
Я воспроизвел один из уровней игры BattleCity известную у нас как Танчики.
На последок комментарий по примеру. В спецификациях картинки которую может выдавать Денди разрешение экрана должно быть 256×240 пикселей.
Поле боя в общеизвестнных Танчиках размером 13х13 больших блоков. Каждый из которых нарисован 4мя повторяющимися спрайтами (коих по общему подсчёту выходит на карте 26х26=676). Итак прикинем как было в оригинале по пикселам и как это правильно масштабировать. Если поделить 240 на 26 то выйдет что целая часть от деления будет 8. Получается что размерность текстуры была 8х8 пиксела т.е. размер поля боя 208х208, а большого блока 16х16. Ширина должна быть 256 пикселов. Сейчас вычислим размер правого столбца с дополнительной информацией и размер полей сверху/снизу. Справа если присмотреться ширина составляет размерность в два блока, итого 2*16=32. У нас уже 32+208=240 слева поле 16, а снизу и сверху соответственно так же по 16 пикселов. Собственно в моём примере размерность большого блока заключена в переменной cellSize, собственно все вычисления делаются иходя из её размеров. Можете по экспериментировать и поменять её значение, настоятельно рекомендую делать его кратным степеням двойки (16, 32, 64, 128. ), если хотите чтоб всё выглядело так как на старом добром денди то устанавливайте её значение равным 16. Хотя и при любых других значениях всё выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нём будет пока утаю.

Домашнее задание

По просьбам трудящихся рассмотрел идею добавлять в конце статьи небольшое задание для читающих.

Что делаем:
Предлагаю воспроизвести на своём холсте один из уровней любой игры из эры 8/16бит. А затем выложить своё произведение комментарием. Можно будет коллективно помогать друг другу и самые интересные работы конечно же потом рассмотрим отдельным постом под пристальным взглядом.

Canvas vs SVG: выбираем лучший инструмент для работы

В это статье мы наконец решим что лучше использовать HTML5 Canvas или все таки SVG? Оба стандарта основываются на HTML5 и вы можете создавать удивительные графические и визуальные эффекты прямо на вашей странице. Но на сколько важно какой из них вы используете в своем проекте?

Что такое HTML5 Canvas?

Вот как WHATWG отвечает на этот вопрос:

Canvas представляет скрипты с зависимостью от растрового разрешения холста, которые могут использоваться для обработки графики, графических игры, рисунков и другие визуальные элементы на лету.

Другими словами, предоставляет поверхность где мы может создать и управлять растрированными изображениями пиксель за пикселем используя JavaScript.

Вы можете воспользоваться HTML5 Canvas API методами и свойствами получая ссылки на 2D объекты контекста. На примере выше, я нарисовал простой красный квадрат, 100×100 пикселей в размере, с отступами по 10 пикселей слева и сверху от краев .

Будучи зависимым от разрешения, изображения созданное на может потерять в качестве, если увеличить его на ретина дисплее.

Рисование простых фигур это всего лишь верхушка айсберга. HTML5 Canvas API дает возможность рисовать дуги, пути, текст, градиенты и т.д. Мы так же можем управлять изображениями попиксельно. Это означает, что можно изменить цвет определенной части, можно анимировать рисунки, даже создать некое видео прямо на холсте и изменить его появление.

Что такое SVG?

SVG расшифровывается как Масштабируемая Векторная Графика(МВГ):

SVG — язык для описания двумерной графики. Как самостоятельный формат или как смешанный с другими XML, он использует XML синтаксис. Если мы смешиваем с HTML5, то используется синтаксис HTML5….

SVG рисунки могут быть интерактивными и динамичными. Анимация может быть определена декларотивна или сценарной.

XML в SVG формат файла для создания векторной графики. Будучи масштабируемым имеет преимущество перед HTML5 Canvas генерируемыми изображениями, позволяя увеличить векторное изображение, сохраняя свою четкость и качество.

Здесь пример того же красного квадрата, который я создал на HTML5 Canvas. С использованием SVG:

С SVG мы можем делать кучу вещей, которые могли делать в , рисовать фигуры и пути, градиенты, шаблоны, анимацию и т.д. В то же время эти технологии работают разными способами. Как станет ясно далее, эта разница играет существенную роль, когда стоит выбор между и SVG для будущего проекта.

Срочный режим и нераспределенный режим

Очень важно различать эти два режима. Это два разных подхода для отображения контента на экране вашего браузера.

HTML5 Canvas как пример срочного режима: нам как разработчикам нужно создать команды для прорисовки объектов, моделей или сцен нашего конечного результата. Графическое API браузера взаимодействует с командами и использует их.

SVG использует сохраненный подход., где мы мы просто задаем инструкцию отрисовки того, что мы хотим увидеть на экране и графический API создает в памяти модель или сцену и переводит их в команды рисования браузера.

На этих базовых различиях этих режимов можно сделать выбор между двумя технологиями.

HTML5 Canvas и SVG бок о бок.


HTML5 Canvas спецификация четко дает понять, что лучше не использовать элемент там где этого можно избежать.

Например, для насыщенных графикой элементов, лучше это реализовать на HTML и CSS, а не .

Необходимо выработать некоторые возможные сценарии где был бы предпочтительнее чем простой HTML и даже SVG.

Для этой цели, давайте перейдем к специфическим особенностям и SVG соответственно.

Для чего HTML5 Canvas подходит лучше всего

Суммируя все выше сказанное, HTML% Canvas зависит от разрешения самого рисунка и не поддерживает свою собственную модель.

Трассировка лучей — техника создания 3D графики.

Рисовка большого количества элементов на маленьком пространстве.

Замена пикселей в видео.

Для чего HTML5 Canvas не подходит

Зависимость от JavaScript

Объединение HTML5 Canvas и SVG для расширения сценариев

Есть случаи, когда необходимо комбинировать HTML5 Canvas и SVG. Например, основанная на игра использует изображения SVG.

HTML5 Canvas: что это такое?

В данной таблице перечисляется список веб-браузеров использующих основные движки:

Движок Выпущенная версия Предварительная версия Используется браузерами
Amaya 11.3.1 11.3-pre Amaya
Gecko 8.0 10.0a2 Все программное обеспечение Mozilla, включая Firefox; SeaMonkey и Galeon; Camino; K-Meleon; Flock (начиная с версии 2.x); Epiphany-gecko; Debian IceWeasel; GNU IceCat (раньше GNU IceWeasel); Icedove, Iceape и Iceowl; Fennec
Presto 2.10.229 2.10.238 Opera; Opera Mobile, Nintendo DS & DSi Browser‎; Internet Channel
Prince 7.1 Tasman IE 5 для Maс нет с 2003 Internet Explorer 5+ для Mac OS X
Trident 5.0 (IE 9) 6.0 (IE 10) Internet Explorer и другие IE подобные: Maxthon (только для Microsoft Windows операционной системы), Windows Phone 7
WebKit 535.1 r104398 Safari (мобильная и настольная версии), Google Chrome, Maxthon 3, Shiira, iCab 4, OmniWeb 5.5+, Epiphany, Adobe AIR, Midori, Adobe Dreamweaver CS4 и CS5, Android браузер, Palm webOS браузер, Symbian S60 браузер, OWB, Steam, Rekonq, Arora, Flock (версия 3+), RockMelt, Konqueror

Значения

Значения указывают на уровень поддержки в самой последней версии движка, или (если номер версии дается) в указанной версии. Номера версий без другого значения указывают версию, в которой движок впервые полностью начал поддерживать эту функцию.

Руководство по Canvas

— это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации.
Изображения в правой части статьи являются примерами использования .
Примеры их создания приводятся в этой статье.

В этом руководстве описываются основы использования элемента для рисования 2D-графики. Приведенные примеры дадут вам понимание того, что вы можете сделать с помощью , а использованные в статье фрагменты кода помогут в создании собственных проектов.

Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживют работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Прежде чем начать

Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создает графику динамически.

В этом руководстве

Смотрите Также

Примечание для помощников

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

Рисование встроенными средствами HTML5 (Canvas)

Одной из интересных возможностей нового стандарта HTML5 является элемент ‹canvas› , или холст. Холст предназначен для создания (именно, создания) растровых изображений на странице средствами графического движка браузера. Canvas способен изображать не только статические, но и динамические изображения (анимацию).

До появления canvas для вставки анимации могли спользоваться gif-изображения, flash-анимация или, основанные на скриптах или других подключаемых модулях, другие решения (в частности Silverlight, Java Applets, ActiveX и другие). Однако, каждое из этих решений имеет ряд недостатков. Например, плохое качество анимации gif-изображений, большой размер загружаемых модулей Java, несоответствие версий Flash проигрывателя, ActiveX работает исключительно в Internet Explorer и многое другое. Но главным фактором появления анимации и графики на основе canvas является высокий рост мобильного сегмента Интернет, особенно устройств типа iPhone, iPod touch, iPad, а также различных устройств под управлением Android. Установить плагин на них нет возможности, а i-устройства не поддерживают Flash (а начиная с версии 4.0 его также не поддерживают устройства под управлением Android).

Поэтому для поддержки огромной доли рынка мобильных устройств с возможностью подключения к сети Интернет анимацию начали создавать при помощи javascript . Для этого обычно используют библиотеки, как например jQuery или Prototype. C введением в действие стандарта CSS3 часть анимаций возможно создавать с помощью каскадных таблиц стилей. Однако самыми широкими возможностями по созданию изображений и анимаций пользуется стандарт HTML5 и его новый элемент ‹canvas› .

Элемент ‹canvas›

‹canvas› — это новый элемент HTML5, который позволяет создавать изображения на сайте с помощью javascript. Область использования холстов довольно широкая. Чаще всего его можно увидеть при создании деловой графики (чарты, диаграмы, графики), а также для рендеринга браузерных игр (чаще всего встречаются в социальных сетях). У ‹canvas› есть только 2 атрибута – ширина и высота. Если эти атрибуты отсутсвуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.

Элемент ‹canvas› создает контекст отрисовки, на котором в будущем можно создавать и манипулировать объектами javascript. Другими словами, ‹canvas› представляет собой прямоугольную область, в которой с помощью javascript можно «рисовать».

На сегодняшний день стандарт полностью описывает работу двумерных контекстов (для плоской графики, 2D). Однако, сейчас проводится работа по разработке стандарта WebGL, для поддержки элементом ‹canvas› трехмерных контекстов (примеры работ можно посмотреть в Лаборатории Chrome).

Для размещения элемента на странице HTML достаточно указать:

После помещения на страницу элементом ‹canvas› можно манипулировать как угодно: помещать на него текст, рисовать графические элементы и линии, выполнять заливку, добавлять анимацию. Все это делается при помощи команд javascript. Чтобы использовать холст программным путем необходимо прежде всего получить доступ к его контексту. После этого выполняются все необходимые действия с контекстом и только тогда результат подтверждается и выводится на холст. То есть, сначала изображение создается программно, а потом результат выводится визуально.

Так как не все браузеры поддерживают HTML5, то на данное время воспользоваться ‹canvas› можно только в следующих браузерах (по информации caniuse.com):

  • Internet Explorer 9+
  • Firefox 2.0+
  • Chrome 4+
  • Safari 3.1+
  • Opera 9.0+
  • iOS 3.2+
  • Android 2.1+

В случае, если к ‹canvas› обратились из браузера, который не поддерживает этот элемент, то пользователь увидит содержимое, помещенное внутри этого тега (такое содержимое называют аварийным), например:

‹canvas› Your browser is not support HTML5 Canvas! Please update your browser version! ‹/canvas›

Рисование на холсте

Перед тем, как начать рисовать, нужно получить от браузера контекст холста, то есть экземпляр объекта CanvasRenderingContext2D . Сделать это можно следующим образом:

В первой строке мы получам сам холст, а во второй с помощью вызова единственного метода объекта холста getContext() получаем контекст этого холста. Параметр 2D указывает на то, что получаемый нами контекст будет создавать плоское изображение (экземпляр объекта CanvasRenderingContext2D ).

Теперь можно приступить к рисованию. Следует помнить, что для рисования с помощью ‹canvas› потребуется понимание системы координат, где каждой точкой является пиксель на экране, а началом координат является верхний левый угол холста. Создадим новый холст, зададим для него атрибут > и добавим к нему рабочку, чтобы было удобнее следить за результатом:

Результат вы можете видеть ниже:

Для иллюстрации примеров будем использовать функцию CreateImage() , которая вызывается при загрузке страницы:

Прямоугольники

Для отображения прямоугольных фигур используются следующие методы:

  • strokeRect(x, y, width, height) — создает прямоугольник без заливки, где x и y — координаты верхнего левого угла прямоугольника, а width и height — соответственно ширина и высота прямоугольника
  • fillRect(x, y, width, height) — создает прямоугольник с заливкой. Значения параметров аналогичны методу strokeRect
  • clearRect(x, y, width, height) — очищает прямоугольную область. Значения параметров аналогичны методу strokeRect

Изменим функцию CreateImage() для демонстрации рисования двух прямоугольников:

Если в код функции CreateImage() добавить строку

То получится следующий результат:

Работа с цветом и толщиной линий

Изменять свойства пера, то есть цвет и толщину линий, можно изменяя свойства экземпляра обекта контекста CanvasRenderingContext2D . Для этих целей существуют следующие свойства:

  • strokeStyle — задает цвет линии контура. Все объекты, которые будут нарисованы позже будут иметь цвет контура, указанный этим свойством. Сам цвет задается в одном из форматов цвета CSS3. Например, rgba(r, g, b, a) или #RRGGBB . Могут использоваться и константы
  • fillStyle — это свойство задает цвет заливки внутри контура. Все объекты, которые будут нарисованы позже будут иметь цвет заливки, указанный этим свойством. Аналогично, цвет задается в формате CSS3
  • lineWidth — это свойство задает толщину линии в пикселях

Следует учитывать, что нельзя назначать свойству strokeStyle значение свойства fillStyle и наооборот — это вызовет ошибку в скрипте. Добавим эти свойства в наш пример:

Работа с пером

Рисование более сложных объектов производится с помощью виртуального «пера». Для работы с ним существует ряд методов. Прежде всего нужно понять разницу между двумя основными методами:

  • moveTo(x,y) — смещает перо в точку с координатами x , y (перо поднято)
  • lineTo(x,y) — рисует линию из текущей координаты пера в точку с координатами x , y (перо опущено)

Изначально перо находится в начале коордиант — верхнем левом углу холста.

Начало рисования сложной линии должно начинаться вызовом метода beginPath() , а конец stroke() . Для того, чтобы замкнуть фигуру можно воспользоваться вызовом метода closePath() . Замкнутую фигуру можно залить цветом. Для этого вместо stroke() следует использовать fill(). Рассмотрим пример:

Результат работы скрипта представлен на нижнем рисунке

Рисование дуг и кривых

Для рисования дуг используется метод arc(x, y, r, start, end, direction) . Здесь x и y — координаты центра окружности, которой соответствует дуга, r — ее радиус, start — угол начала дуги, end — угол конца дуги, direction — логическое значение направления дуги ( true — по часовой стрелке, false — против часовой стрелки)

построит следующую дугу:

Нужно учесть, что окружность — частный вид дуги, значит, для ее изображения достаточно изменить предыдущую строку на

И в результате получится окружность:

На холсте также есть возможность изображать кривые — квадратичные и кубические (кривые Безье). Для этого необходимо воспользоваться следующими методами:

  • quadraticCurveTo (Px, Py, x, y) — создает квадратичную кривую
  • bezierCurveTo (P1x, P1y, P2x, P2y, x, y) — создает кривую Безье

Здесь x и у — это точки в которые необходимо перейти, а координаты P — это дополнительные точки, необходимые для построения кривых. Одна для квадратичной и две для кривой Безье. Рассмотрим пример:

Результат отображен на рисунке внизу:

Вставка текста

Существует два метода и несколько свойств для вывода и форматирования текста. Для вывода текста используют следующие методы:

  • strokeText(‘text’, x, y, width) — выводит на холст текст без заливки. Здесь ‘text’ выводимая строка, x и y — координаты верхнего левого угла блока с текстом на холсте, width — максимальная ширина блока с текстом. Если выводимый текст получается шире, холст выводит его либо шрифтом с уменьшенной шириной символов (если данный шрифт поддерживает такое начертание), либо шрифтом меньшего размера.
  • fillText(‘text’, x, y, width) — выводит на холст текст без контура, только заливкой. Все параметры повторяют аналогичные у метода strokeText().

Для форматирования текста есть несколько различный свойств:

  • font — свойство позволяет установить все возможные параметры выводимого шрифта. Соответствует аналогичному стилевому свойству font
  • textAlign — свойство позволяет выравнивать текст относительно блока вывода (точки, которая задается координатами x и y)
  • textBaseline — свойство позволяет задать вертикальное выравннивание текста относительно базовой линии

Пример вывода текста:

Размещение на холсте внешних изображений

Кроме рисования графических элементов на холсте можно разместить уже готовое изображение в любом из стандартных форматов. Для этого необходимо создать экземпляр объекта Image. Пример использования:

Мастер Йода рекомендует:  4 причины, которые обязывают нас тестировать приложения
Добавить комментарий