Лекция
Сразу хочу сказать, что здесь никакой воды про canvas, и только нужная информация. Для того чтобы лучше понимать что такое canvas , настоятельно рекомендую прочитать все из категории Расширяемые языки разметки: XML, HTML, DHTML, HTML 5.
HTML5-тег Canvas является исключительно полезным инструментом для рисования и анимации. Тег Canvas использует технологию JavaScript для рисования графических объектов непосредственно на Web-странице. Canvas представляет собой прямоугольную область, задаваемую и контролируемую разработчиком. Эта область позволяет осуществлять допускающую использование сценариев визуализацию двухмерных 2D-форм и растровых изображений.
Тег Canvas идеально подходит для создания впечатляющих визуальных материалов, которые улучшают пользовательские интерфейсы , диаграммы, фотоальбомы, схемы, графики, анимированные материалы и встраиваемые графические приложения. Тег Canvas имеет несколько методов для рисования маршрутов, прямоугольников, кругов и символов.
Обязательным условием для создания изображений в среде Canvas является знакомство с координатной сеткой (координатной плоскостью). Измерения пространственной области по ширине и высоте задаются в пикселах. В среде Canvas используются координаты x и y. Верхний левый угол области Canvas имеет координаты x=0, y=0.
По умолчанию размеры прямоугольной области Canvas имеют ширину 300 пикселов и высоту 150 пикселов, но вы можете задать точные размеры тега Canvas посредством указания его ширины и высоты. Схема на рисунке 1 демонстрирует организацию координатного пространства по x и y.
Рисунок 1. Координаты Canvas
На рисунке 1 показана область Canvas размером 100 х 100 пикселов.
Чтобы поместить что-либо в зону Canvas, сначала нужно задать область Canvas в HTML-файле. Чтобы нарисовать свои изображения, вы должны создать JavaScript-код, который обращается к тегу и коммуницирует с API-интерфейсом HTML5 Canvas.
Базовая структура тега Canvas имеет следующий вид:
Тег canvas имеет два собственных атрибута: width (высота) и height (ширина). Кроме того, тег Canvas имеет все ключевые HTML5-атрибуты, такие как class, id и name. Атрибут id используется в показанном выше коде. JavaScript-код использует созданный здесь идентификатор id тега Canvas для обозначения области Canvas, на которой будет осуществляться рисование. JavaScript-код выявляет надлежащую область Canvas с помощью метода document.getElementById(), как показано ниже.
var canvas = document.getElementById("myCanvas");
Каждый тег Canvas должен иметь определение контекста, как показано ниже. В настоящее время официальная спецификация распространяется только на 2D-среду.
var context = canvas.getContext("2d");
После идентификации надлежащей области Canvas и указания ее контекста можно приступать к рисованию.
В начало
Рассмотрение тематики HTML5 Canvas в данной статье охватывает различные инструменты рисования, эффекты и преобразования. Инструменты рисования обеспечивают формирование следующих объектов:
Мы будем использовать следующие эффекты Canvas:
Будут рассмотрены следующие преобразования:
Чтобы нарисовать линию в среде Canvas, воспользуйтесь методами moveTo(), lineTo() и stroke(). Кроме того, используйте методbeginPath() для восстановления текущего маршрута.
Метод beginPath() начинает новый маршрут. Прежде чем рисовать новую линию с разными субмаршрутами, необходимо применить метод beginPath() для указания новой начальной точки рисования. Когда вы рисуете первую линию, нет необходимости вызывать метод beginPath().
Метод moveTo() задает начальную точку, в которой должен начинаться новый субмаршрут. Метод lineTo() создает субмаршруты. Внешней вид линии можно изменить с помощью тегов lineWidth и strokeStyle. Тег lineWidth меняет толщину линии, а тегstrokeStyle меняет цвет линии.
На рисунке 2 показаны три линии, нарисованные с использованием разных цветов.
Рисунок 2. Область Canvas с линиями разного цвета
Линии на рисунке 2 были созданы с помощью кода, показанного в листинге 1. Синяя линия с закругленными концами создается следующим образом. Сначала указывается необходимость начала нового маршрута: context.beginPath(). Затем используются следующие методы:
Все описываемые линии имеют длину по 50 пикселов, хотя и создается впечатление разной длины — это визуальная иллюзия, порождаемая так называемыми «завершителями линий» (line cap). Имеются три возможных типа завершителя:
По умолчанию используется завершитель butt. При использовании закругленных или квадратных завершителей длина линии увеличивается на величину, равную ширине этой линии. Например, линия длиной 200 пикселов и шириной 10 пикселов с закругленными или квадратными завершителями будет иметь результирующую длину 210 пикселов, поскольку каждый завершитель добавляет по 5 пикселов на каждом конце линии. Линия длиной 200 пикселов и шириной 20 пикселов с закругленными или квадратными завершителями будет иметь результирующую длину 220 пикселов, поскольку каждый завершитель добавляет по 10 пикселов на каждом конце линии.
Чтобы лучше понять, как осуществляется рисование линий, выполните и измените код на рисунке 1.
Листинг 1. Создание в среде Canvas трех линий разного цвета
Для создания прямоугольной области в Canvas имеются три метода:
Для каждого из этих трех методов x и y задают положение на Canvas относительно левого верхнего угла прямоугольника (x=0, y=0), аwidth и height задают ширину и высоту прямоугольника, соответственно.
На рисунке 3 показаны три прямоугольные области, созданные с помощью кода в листинге 2.
Рисунок 3. Прямоугольная область Canvas
Метод fillRect() создает прямоугольник, заполненный цветом по умолчанию (черный). Метод clearRect() создает прямоугольную область в центре первого прямоугольника. Она размещается в центре прямоугольника, сформированного методом fillRect(). МетодstrokeRect создает прямоугольник, который имеет только видимую черную границу.
Листинг 2. Код для рисования прямоугольных областей на Canvas
Rectangle Example
Для рисования кругов и полукругов применяется метод arc(). Метод arc() имеет шесть аргументов:
context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
Аргументы centerX и centerY задают координаты центра круга. Аргумент radius представляет собой радиус, т.е. расстояние по прямой от центра до окружности. Создаваемая дуга будет частью заданного круга. Аргументы startAngle и endAngle представляют собой начальную и конечную точку дуги, соответственно (в радианах). Аргумент anticlockwise имеет тип Boolean. Если этот аргумент имеет значение true, то рисование дуги осуществляется против часовой стрелки; если он имеет значение false, то рисование дуги осуществляется по часовой стрелке.
Чтобы нарисовать круг с помощью метода arc() присвойте начальному углу значение 0, а конечному углу — значение 2*PI, как показано ниже.
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Чтобы нарисовать полукруг с помощью метода arc() присвойте начальному углу значение startingAngle + PI, как показано ниже.
context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);
Квадратичная кривая создается с помощью метода quadraticCurveTo(), как показано ниже. Квадратичная кривая задается точкой контекста, контрольной точкой и конечной точкой. Контрольная точка задает кривизну кривой.
context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, endX, endY);
Кривая Безье имеет начальную и конечную точки, как и квадратичная кривая, но в отличие от нее имеет две контрольные точки.
context.moveTo(x, y); context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
Кривая Безье создается с помощью метода bezierCurveTo(). Об этом говорит сайт https://intellect.icu . Поскольку кривая Безье задается двумя контрольными точками, а не одной, она позволяет создавать более сложные изгибы.
На рисунке 4 показаны (слева направо): дуга, квадратичная кривая, кривая Безье, полукруг и круг.
Рисунок 4. Дуга, кривые и круг
Изображение на рисунке 4 было создано с помощью кода, показанного в листинге 3.
Листинг 3. Код для дуги, кривой и круга
Arcs, Curves, Circles, & Semicircles
Методы translate(), scale() и rotate() изменяют текущее состояние изображения . Об этом говорит сайт https://intellect.icu . Метод 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. Код для создания преобразований
Transformations Example
Градиенты
Градиент— это заливка, которая переходит от одного цвета к другому, осуществляя смешивание цветов в зонах их пересечения. 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)— сочетает два цвета или более в круговом или коническом шаблоне с помощью шести аргументов:
На рисунке 6 показано четыре градиента: линейный градиент, градиент текста, линейный диагональный градиент и радиальный градиент.
Рисунок 6. Примеры градиентов
Изображение на рисунке 6 было создано с помощью кода, показанного в листинге 5.
Листинг 5. Пример кода для формирования градиента
Gradient Example
Вы можете изменять изображения посредством кадрирования его определенных областей. Кадрирование в среде 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. Код для кадрирования примера изображения
Crop Example
При создании анимаций всегда возникает необходимость работы со слоями. Слои позволяют изолировать компоненты, что существенно упрощает кодирование и отладку, а также повышает эффективность этих операций. API-интерфейс Canvas не имеет слоев, однако мы может создать несколько сред Canvas.
Анимация должна управляться по времени. Таким образом, для создания анимации необходимо иметь доступ к каждому ее кадру. Применительно к анимации API-интерфейс Canvas имеет одно существенное ограничение: после того как изображение нарисовано в среде Canvas, оно остается там в неизменном виде. Чтобы переместить изображение, необходимо повторно нарисовать его.
Для создания анимации выполните следующие шаги.
Управление анимацией может осуществляться двумя способами: с помощью функции setInterval или с помощью функцииsetTimeout, каждая из которых может быть использована для вызова той или иной функции после истечения заданного периода времени. Функция setInterval исполняет заданный код многократно. Функция setTimeout исполняется всего один раз после истечения отведенного периода времени.
На рисунке 9 показан один кадр анимации пловца с помощью нескольких сред Canvas. Вода находится на одной среде Canvas, а пловец находится на другой среде Canvas.
Рисунок 9. Анимация с использованием изображений на нескольких тегах Canvas
Пловец создается с помощью кода, показанного в листинге 7. Для создания воды используется линейный градиент. Вода имеет четыре оттенка синего цвета, что обеспечивает приемлемую иллюзию воды. Движение пловца создается посредством использования значений positionX и positionY, которые меняют позу изображения. Создание головы пловца осуществляется с помощью методаarc(). Ноги и руки пловца создаются посредством рисования линий и последующего изменения их положений с помощью lineTo(). Изменения туловища осуществляются посредством изменения положения с помощью moveTo(). Поскольку мы имеем дело с анимацией, то, чтобы увидеть движение пловца, необходимо исполнить данный код.
Листинг 7. Пример анимации
Animation & Multiple Canvas Example
HTML5-тег Canvas играет центральную роль при создании RIA-приложений на базе браузеров. Он предоставляет практичную среду рисования, базирующуюся на технологии JavaScript и ограниченную лишь воображением разработчика. Эта среда не слишком сложна для освоения. Кроме того, в Интернете имеется множество инструментов поддержки, облегчающих обучение и подготовку, включая краткие инструкции, блоги, онлайновые статьи, видео- и текстовые пособия, типовые приложения.
Возможность изменять тексты и изображения в визуальном режиме и имитировать движение делает Canvas исключительно ценным инструментом. Вне зависимости от того, применяете ли вы Canvas как дизайнер или разработчик, используете ли вы Canvas при построении игровых приложений для мобильных устройств или просто хотите улучшить использование рабочей поверхности экрана, — в любом случае Canvas является важнейшим компонентом возможностей, предоставляемых спецификацией HTML5.
CANVAS шаг за шагом:
Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5 , который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.
У нашего подопытного тега есть всего два атрибута — height и width, высота и ширина соответственно, по умолчанию размер холста 150х300 пикселей.
Стоит отметить что canvas создает область фиксированного размера содержимым которого управляют контексты.
Элементарный пример:
canvasExampleОбновите браузер
Если сохранить эти несчастные 13 строк в файл и открыть его браузером, то можно будет увидеть область с черным прямоугольником, так вот это и есть тот самый холст, на котором нарисован прямоугольник размеры которого равны размерам canvas'а.
Самой элементарной фигурой которую можно рисовать является прямоугольник. Предусмотрено три функции для отрисовки прямоугольников.
strokeRect(x, y, ширина, высота) // Рисует прямоугольник fillRect(x, y, ширина, высота) // Рисует закрашенный прямоугольник clearRect(x, y, ширина, высота) // Очищает область на холсте размер с прямоугольник заданного размера
Пример иллюстрирующий работу этих функций:
А теперь краткий построчный разбор:
в строках 10 и 11 мы изменили размер холста — чтоб бы задуманное нами изображение полностью отобразилось,
в строках 12 и 13 мы нарисовали два не закрашенных прямоугольника которые будут символизировать своеобразную рамку нашей «шахматной доски»,
в строке 14 отрисовываем закрашенный прямоугольник размеры которого бы позволил вместить в себе 64 квадрата с шириной стороны 32 пикселя,
в строках с 15 по 19 у нас работает два цикла которые очищают на черном прямоугольнике квадратные области в таком порядке что бы в итоге полученное изображение было похоже на шахматную доску
Рисование фигур составленных из линий выполняется последовательно в несколько шагов:
beginPath() closePath() stroke() fill()
beginPath используется что бы «начать» серию действий описывающих отрисовку фигуры. Каждый новый вызов этого метода сбрасывает все действия предыдущего и начинает «рисовать» занова.
closePath является не обязательным действием и по сути оно пытается завершить рисование проведя линию от текущей позиции к позиции с которой начали рисовать.
Завершающий шаг это вызовом метода stroke или fill. Собственно первый обводит фигуру линиями, а второй заливает фигуру сплошным цветом.
Те кто когда-то на школьных 486х в былые годы рисовал в бейсике домик, забор и деревце по задумке учителя тот сразу поймет часть ниже. Итак, существуют такие методы как,
moveTo(x, y) // перемещает "курсор" в позицию x, y и делает ее текущей lineTo(x, y) // ведет линию из текущей позиции в указанную, и делает в последствии указанную текущей arc(x, y, radius, startAngle, endAngle, anticlockwise) // рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление
Пример ниже показывает действие всего описанного выше:
В строке 14 заливается цветом дуга, в строке 22 обводится контур нашей короны.
Что такое кривые Безье я думаю лучше объяснит Википедия.
Нам доступно две функции, для построения кубической кривой Бизье и квадратичной, соотвестствено:
quadraticCurveTo(Px, Py, x, y) bezierCurveTo(P1x, P1y, P2x, P2y, x, y)
x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубическо кривой соответственно две дополнительные точки.
Пример двух кривых:
Что бы наше изображение было не только двух цветов, а любого цвета предусмотрено, два свойства
fillStyle = color // определяет цвет заливки strokeStyle = color // цвет линий цвет задается точно так же как и css, на примере все четыре способа задания цвета
Цвет задается точно так же как и css, на примере все четыре способа задания цвета
// все четыре строки задают оранжевый цвет заливки ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"
Аналогично задается и цвет для линий.
Возьмем пример с шахматной доской и добавим в него немного цвета:
Что бы усвоить информацию и закрепить прочитанное на практике я всегда ставлю перед собой не большую цель которая бы одновременно охватывала все прочитанное и одновременно процесс достижения которой было бы интересен мне самому. В данном случае я попытаюсь отрисовать уровень одной из моих самых любимых в детстве игр. Собственно за не имением времени — добавлять жизнь на него я не буду, а сделаю максимально понятный код охватывающий практически все то что сегодня здесь описал.
Я воспроизвел один из уровней игры BattleCity известную у нас как Танчики, а вот и ссылка на pastebin на случай если не будет откликаться дропбокс.
На последок комментарий по примеру. В спецификациях картинки которую может выдавать Денди разрешение экрана должно быть 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. Хотя и при любых других значениях все выглядит нормально. Если то как я пишу понравится кому-то кроме меня, то напишу продолжение, а то что в нем будет пока утаю
CANVAS шаг за шагом:
Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения. Естественно рисовать на холсте примитивами очень не удобно и требует определенных трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.
Создание нового графического объекта:
var img = new Image(); // Создание нового объекта изображения img.src = 'image.png'; // Путь к изображению которое необходимо нанести на холст
Кстати в качестве источника изображения, можно указать вот такую строку в которой изображение и описанно:
img.src = 'data:image/gif;base64,R0lG.... s=';
Теперь мы перейдем к рисованию изображения на холсте. Для этого существует функция drawImage.
drawImage(image, x, y) // Где x и y это координаты левого верхнего угла изображения, а первый параметр это изображение
Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция:
var img = new Image(); // Новый объект
img.onload = function() { // Событие которое будет исполнено в момент когда изображение будет загружено
/*
Какие-либо действия
*/
}
img.src = 'myImage.png'; // Путь к изображению
Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример:
Ссылка на фидл с примерами для этой стать.
Но если бы все ограничивалось простым рисованием изображением, то отдельную статью можно было бы не писать, а ограничиться подпунктом «Изображения» в предыдущем посте. Итак теперь мы попытаемся масштабировать изображение и для этого существует еще один способ вызова функции drawImage:
drawImage(image, x, y, width, height) // параметры width, height меняют ширину и высоту изображения
Возьмем предыдущий пример и внесем в drawImage некоторые изменения:
ctx.drawImage(pic, 0, 0, 300, 150);
Ссылка на фидл с примерами для этой стать.
Третий вызов drawImage с восемью параметрами, выглядит приблизительно так:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // Первый параметр указывает на изображение // sx, sy, sWidth, sHeight указывают параметры фрагмента на изображение-источнике // dx, dy, dWidth, dHeight ответственны за координаты отрисовки фрагмента на холсте
Возьмем все тот же пример и подкорректируем функцию drawImage в третий раз:
ctx.drawImage(pic, 25, 42, 85, 55, 0, 0, 170, 110);
Ссылка на фидл с примерами для этой стать.
Теперь осталось закрепить все пройденное на практическом примере. Как и в том примере это будет небольшая карта, только не из какой-то существовавшей игры, а придуманной нами. Для того что бы он нормально работал нам необходимо будет создать в любом графическом редакторе изображение составленное из фрагментов которые нам будут нужны что бы нарисовать дорожку, домик и полянку. Вообще фрагменты карты называются тайлами, а файл в котором они все собраны в одно изображение называется тайлсетом. Вот это изображение я нарисовал собственноручно в программе Pinta под Ubuntu.
Итак, размерность будет 8 на 8 квадратных блоков шириной 32 пиксела. На карте нам необходимо будет изобразить домик и дорожку. Элементы домика нарисованы ручками, можно сказать каждый кирпичик. Траву и песок делалось путем заливки облости соответствующим цветом и добавки шума. Все конечно представленно очень примитивно, но показательно.
Рассмотрим с пинцетом такой кусок кода как var map = [[{x:1, y: 4}… значения x и y указывают какой элемент из картинки брать. Т.е. если исходный рисунок разбить на квадрат 32×32 то станет понятней.
И форэкзампл:
А как ты думаешь, при улучшении canvas, будет лучше нам? Надеюсь, что теперь ты понял что такое canvas и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Расширяемые языки разметки: XML, HTML, DHTML, HTML 5
Комментарии
Оставить комментарий
Расширяемые языки разметки: XML, HTML, DHTML, HTML 5
Термины: Расширяемые языки разметки: XML, HTML, DHTML, HTML 5