HTML5 Canvas: что это такое?
Что можно рисовать с помощью : арки, кривые ( их различные типы ), линии и прямоугольники. Конечно же, их можно комбинировать, и за счет этого создавать практически любые формы или объекты с различными эффектами ( прозрачность, смешивание, градиенты, тени, заливки и контуры ).
Примеры использования HTML5 Canvas
В данном примере мы сначала выводим надпись, а после нее размещаем фигуру при помощи элемента canvas : ширина и высота получились по 400, а ширина границы 10 пикселей. В результате мы получаем большой квадрат с толстым контуром.
В приведенном выше HTML canvas примере fillStyle сообщает браузеру, каким цветом нужно залить наш рисунок. Тем временем fillRect определяет местоположение и размер рисунка в рамках нашего холста, которому мы дали имя « squareCanvas «.
У вас есть четыре координаты, которые нужно заполнить. Первое число ( 125 ) сообщает браузеру, с какого количества пикселей должно начаться изображение. Если заменить цифру на 0, то изображение отобразится сначала холста. Второе число ( также 125 ) сообщает браузеру, каким будет отступ от верхней границы.
HTML5 Canvas: рисуем прямую линию
Линии рисовать еще проще. В данном примере мы снова нарисуем квадрат. После чего добавим скрипт, который нарисует прямую линию через центр холста сверху вниз:
В приведенном выше примере HTML canvas moveTo(100,0) указывает начальную точку для линии. LineTo(100,200) – это параметр, в котором мы указываем конечную точку линии. Метод stroke() позволяет указать тип заливки линии. В данном случае мы оставляем этот параметр пустым, что дает нам простую черную линию.
Но если нам нужно будет добавить еще одну линию? Мы просто добавляем координаты второй линии в следующим образом:
HTML5 Canvas: работа с текстом
Кроме фигур элемент HTML canvas также позволяет создавать тексты. Рассмотрим пример с использованием шрифта Arial в размере 32px :
Иные способы применения
Элемент HTML5 canvas также можно использовать для вставки изображений, градиентов и комплексной анимации.
Canvas F.A.Q
Несколько дней назад я предложил позадавать на Хабре интересующие вопросы по Canvas. Под Хабракатом — ответы на 27 вопросов.
1. Зачем нужен Canvas, что это вообще такое, какова поддержка браузерами, какова основная область применения, насколько развиты фреймворки, примеры?
Canvas — низкоуровневое API для отрисовки графики. Поддерживается всеми современными браузерами. Естественно, не поддерживается устаревшими версиями IE (8 и ниже)
Фреймворки развиваются, хотя им ещё нужно повзрослеть. Базовые примеры можно найти на MDC. Более мощные примеры можно поискать на сайтах а-ля Chrome Experiments или в примерах приложений на фреймворках, например LibCanvas
2. Когда нужно использовать Canvas, а когда Flash?
Flash быстрее, кроссбраузернее, с хорошими инструментами и фреймворками.
Canvas сейчас используется, в основном, энтузиастами и экспериментаторами.
Особой причины уходить с рынка флешерам нету.
Но Canvas’ом занимаются такие крупные игроки, как Google, Mozilla, Apple, Microsoft, все они оптимизируют и ускоряют отрисовку Canvas, постепенно отмирают старые браузеры и приходят новые. Посмотрите на Firefox 2.0 и Firefox 4.0. За три года скорость увеличилась на порядок и основной скачок сделан именно с выходом четвёртой версии. Аналогично — Опера. Также, за это время успел появиться Хром и выпустить уже 12 мажорных версий своего браузера. В общем, у HTML5 и Canvas в частности — светлое будущее.
3. Когда использовать Canvas, а когда SVG?
Это холиварная тема. Есть разные взгляды на неё.
Почитайте это обсуждение: habrahabr.ru/blogs/javascript/114129/#comment_3678242
Посмотрите эту картинку:
Почитайте статью «Thoughts on when to use Canvas and SVG»
С одной стороны, при использовании Canvas необходимо будет реализовывать то, что уже реализовано в SVG. С другой стороны, в Canvas можно применить такие оптимизации, которые в SVG невозможны, например отрисовка из кеша.
На мобильных телефонах актуально использование CSS3 вместо SVG и Canvas, т.к. оно ускоряется аппаратно и очень плавно работает.
4. Какую литературу почитать?
Рекомендую начать с Mozilla Developers Network, там очень классно и с примерами описаны основы Canvas. После этого придумайте себе задание и постарайтесь его реализовать. API — очень простой, тут главное — опыт.
Есть свежая книжка «HTML5 Canvas» издательства O’Reilly Media. Я не читал, но O’Reilly обычно выпускают классные книжки.
5. Как сделать скриншот Canvas?
Есть небольшая библиотека canvas2image она позволяет сохранять Canvas что на сервер, что на клиент. На клиенте сохранение производится при помощи toDataURL. На сервере получается содержимое при помощи getImageData, транслируется в base64 код и отправляется POST-запросом. На сервере достаточно сделать что-то типа такого кода:
Если «Скриншот канваса === Сохранить канвас как картинку», то:
Важно Вы должны задать фиксированные размеры канваса (через width/height или style), иначе получете плохие данные из toDataURL
6. Интересуют методы улучшения быстродействия (поднятие fps).
Есть разные методы оптимизации, которые зависят от приложения. Три из них я описывал в топике Пятнашки на LibCanvas. Это:
* Обновление холста исключительно при необходимости
* Вместо перерисовки всего холста перерисовывать только изменившиеся куски
* Отрисовка объектов в буфер (что позволяет рисовать объект каждый кадр как набор пикселей, а не применять все фильтры и кучу матана)
Вам очень поможет профайлер в вашем любимом браузере.
7. Работа с видеозахватом
Если вы про захват видео с камеры:
API есть только в черновике спецификации Media Capture API ближайший релиз спецификации возможен в PhoneGap — возможно есть в транке. Работать с ним будет очень просто. Вешается обработчик на «устройство», каждый кадр передается в виде картинки в формате data uri:
8. Каково самое эффективное решение на данный момент для попиксельного доступа при отрисовке произвольного изображения на Canvas (без WebGL)? Например, ручная прорисовка граней при построении 3D с использованием закраски по Гуро/Фонгу.
Для попиксельного доступа есть только одно решение — использовать getImageData
9. Есть ли пути эффективно и кросплатформенно смасштабировать канву со всеми внутренностями под размеры экрана?
Попробуйте использовать css. canvas < width: 100%; height: 100%; >. Как-то так. Но js-код должен учитывать этот кусок, т.к. сместятся координаты.
10. Поддержка и быстродействие на Android/iOS устройствах
Поддерживается полностью. Правда, я на iPhone2 заметил неподдержку fillText, но это единственное.
Проблема с производительностью, но кое-что можно запустить. Пока для мобильников лучше использовать CSS3. Возможно, в будущем, что-то поменяется.
11. Интересует самый быстрый способ нарисовать точку (например, для графика). Однопиксельную и четырёхпиксельную, произвольного цвета.
Самый быстрый с точки зрения производительности — использовать fillRect для одиночных отрисовок и getImageData+putImageData для массовых отрисовок.
12. В каком виде хранится, отображается и перерисовывается «мир» в играх с видом сбоку (как playbiolab.com), т.е. игрок побежал вправо камера подвинулась вместе с ним и мир «подвинулся»
Я точно не знаю, как оно делается в biolab. Есть несколько путей. Можно наложить несколько слоёв canvas друг на друга, отрисовать на нижнем мир и отображать нужную часть при помощи CSS.
13. 3d-canvas
14. Редакторы — в чём писать?
Подходит любой редактор JavaScript. Раньше я пользовался Netbeans 7, сейчас перешёл на Jetbrains WebIde
15. База данных
Для хранения данных на стороне клиента есть два современных стандарта — webStorage и IndexedDB.
IndexedDB — это крутой интерфейс с кучей возможностей, описывался на Хабре, а webStorage — простое key-value хранилище
16. Canvas и IE
В IE до девятой версии не поддерживается. Все попытки сделать его поддерживаемыми можно назвать подходящими только для очень узкого круга задач и не дают вменяемой скорости.
Имхо, единственный вариант — это Google Chrome Frame, плагин, который устанавливается на полубраузер как Flash или SilverLight и превращает говно в конфетку Internet Explorer в современный браузер.
17. Как посчитать расстояние между нарисованными объектами, есть ли готовые решения
Зависит от объектов. Некоторые вещи делаются очень просто. Например, расстояние между точками считается по теореме Пифагора. Между кругами — считаем расстояние между точками от отнимаем радиусы. У более сложных фигур есть свои законы.
Кое-что (по крайней мере пересечения ректанглов/кругов/полигонов) уже есть в LibCanvas. Если у вас какие-то особые требования — необходимо искать алгоритмы. Я могу посоветовать вот что:
Известные алгоритмы определения столкновений и реакции на них во флэше.
18. Как и какими средствами лучше делать анимации на Canvas?
19. Работа с текстом в Canvas (в т.ч. анимирование)
Текст отрисовывается при помощи fillText/strokeText. Свои шрифты можно подключать при помощи CSS3.
На него воздействуют все правила — такие как тени, трансформации, установка цветов и т.п. К примеру, с помощью светлой тени на тёмном фоне, можно легко сделать светящийся текст
20. Работа с изображениями.
21. Использование Бэк Буффера, как отрисовать один Canvas в другой.
Вы можете отрисовать какую-либо информацию в скрытый Canvas, который затем использовать точно так же как картинку (смотреть предыдущий пункт).
Буферизация позволяет ускорить отрисовку многократно. Например, отрисовать один градиент из буфера в 5 раз быстрее, чем отрисовать этот же градиент напрямую.
Использовать очень просто:
22. Анимация в канвасе происходит методом полной перерисовки. Таким образом информация обо всех объектах хранится в объекте JS и каждый раз перерисовывается, или можно как то создавать спрайты и слои?
Да, есть различные приёмы. Можно использовать буфера для того, чтобы не отрисовывать десятки мелких объектов, можно перерисовывать холст только частично, но чаще всего дешевле просто всё перерисовать, чем понять, что перерисовывать надо, а что — нет.
23. Хотелось бы узнать как с помощью canvas нарисовать 3д объект(желательно с учетом перспективы) и вращать?
24. Отрисовка SVG в Canvas
Можно при помощи CanVG. Смысла практически нету)
25. Насколько различается поддержка в браузерах или все следуют стандарту?
Различия минимальны. Обнаруживались мелкие баги, легкие несоответствия. Например, Опера не могла отрисовать прямоугольник с отрицательными размерами сторон:
По разному сжимаются и поворачиваются картинки. Например, в Хроме при повороте на углах заметны зубья (нету сглаживания)
Зато он лучше, чем Fx и Opera растягивает картинки:
Есть ещё мелкие различия в JavaScript. Например, в некоторых браузерах sort реализует неустойчивую сортировку, так что, если элементы сортировать по Z-индексу, то элементы с одинаковым Z-индексом будут менятся местами.
Это очень мелкие нюансы. Большинство — скрыто за дружелюбным API фреймворков. Лично я разрабатываю только под один браузер и в большинстве случаев всё работает совершенно корректно и в остальных.
26. putImageData vs drawImage
Буду краток — putImageData значительно медленнее. Более того, с увеличением размеров картинки — увеличивается медлительность.
27. Мне было бы очень интересно послушать про типовые реализации основного функционала canvas-библиотек, таких как: эмуляция слоев, определение активного элемента (на котором в данный момент находится курсор), создание системы управления событиями и т. д.
Этот вопрос задавали мне чаще всего, потому для него — отдельный топик)
Вопросы без ответов
Ребята, кто может дать ответы на эти вопросы — прошу в комменты
1. Как вывести текст на canvas в IE (IE8- + excanvas.js)? Пробовал text.canvas.js с гуглокода — выводит ошибку про отсутствие нечто glyphs.
Я не использую эмуляцию в IE
2. Существуют ли какие-то секретные библиотеки, умеющие рисовать линии переменной толщины. В случае с прямыми это относительно несложно реализовать «костыльным» способом, а вот всякие кривые Безье — видимо, только на низком пиксельном уровне.
3. Существуют ли какие-то секретные библиотеки, умеющие рисовать градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
Давайте порисуем
Перевод: Влад Мержевич
В HTML5 определен элемент как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Как же этот холст выглядит? В действительности, никак. У тега нет собственного контента и рамки.
Давайте добавим пунктирную рамку, чтобы увидеть, с чем мы имеем дело.
Теперь легко можно обнаружить элемент в DOM.
var a_canvas = document.getElementById(«a»);
Простые формы
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Каждый холст изначально пустой. Это скучно! Давайте что-нибудь нарисуем.
Событие onclick вызывает эту функцию:
function draw_b() <
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
>
Первая строка функции не делает ничего особенного, она просто находит элемент в DOM.
function draw_b() <
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
>
Спроси профессора Маркапа
О. Пока нет. Отдельные производители экспериментируют с собственным трехмерным API, но ни один из них не стандартизирован. В спецификации HTML5 отмечено: «в будущих версиях данной спецификации, вероятно, будет определен 3D-контекст».
Итак, у вас есть элемент и есть контекст рисования, где определены методы и свойства рисования. Имеется целая группа свойств и методов посвященных рисованию прямоугольников.
Спроси профессора Маркапа
☞ В. Можно ли «перезагрузить» холст?
О. Да. Установка ширины или высоты для элемента сотрет его содержимое и сбросит все свойства контекста рисования в значения по умолчанию. Вам даже не нужно менять ширину, вы можете просто установить ее в текущее значение, например, так:
var b_canvas = document.getElementById(«b»);
b_canvas.width = b_canvas.width;
Вернемся к предыдущему примеру.
var b_canvas = document.getElementById(«b»);
var b_context = b_canvas.getContext(«2d»);
b_context.fillRect(50, 25, 150, 100);
Вызов метода fillRect() рисует прямоугольник и заполняет его текущим стилем заливки, исходно черный цвет, пока вы его не измените. Прямоугольник задается левым верхним углом (50, 25), шириной (150) и высотой (100). Чтобы лучше представить, как это работает, давайте посмотрим на систему координат.
Координаты холста
Холст это двумерная сетка. Координата 0,0 находится в левом верхнем углу холста. Вдоль оси X значения растут к правому краю холста. По оси Y значения растут к нижнему краю холста.
Координатная сетка была нарисована с помощью и включает в себя:
Тогда мы должны найти сценарий элемент в DOM и получить его в контекст рисования.
var c_canvas = document.getElementById(«c»);
var context = c_canvas.getContext(«2d»);
Теперь мы можем рисовать линии.
Контуры
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Представьте, что вы чернилами рисуете картину. Вы же не будете начинать сразу с чернил, потому что можете сделать ошибку. Вместо этого вы начнете рисовать линии и кривые карандашом, а когда будете удовлетворены, обведете эскиз чернилами.
Каждый холст имеет контуры подобные рисунку карандашом. Вы можете нарисовать что угодно, но это не будет частью готовой работы, пока вы не возьмете перо и не обведете ваши контуры чернилами.
Чтобы рисовать прямые линии карандашом, можно использовать следующие два метода:
Давайте нарисуем серую сетку.
Рисование вертикальных линий
for (var x = 0.5; x context.lineTo(x, 375);
>
Рисование горизонтальных линий
for (var y = 0.5; y context.lineTo(500, y);
>
Это все были «карандашные» методы. На самом деле, на холсте еще ничего не нарисовано, нам нужны «чернильные» методы, чтобы сделать рисунок видимым.
context.strokeStyle = «#eee»;
context.stroke();
Спроси профессора Маркапа
☞ В. Почему мы начинаем x и y c 0.5, а не с 0?
К примеру, если вы попытаетесь нарисовать линию от (1, 0) до (1, 3), браузер будет рисовать линию с перекрытием в полпиксела по обе стороны от x=1. На экране невозможно отобразить половину пиксела, поэтому линия будет расширена для покрытия двух пикселов.
Если вы попробуете нарисовать линию от (1.5, 0) до (1.5, 3), браузер нарисует линию с перекрытием полпиксела на каждой стороне от x=1.5, что в результате дает истинную однопиксельную линию.
Спасибо Джейсону Джонсону за эти графики.
Теперь нарисуем горизонтальную стрелку. Все линии и кривые на контуре нарисованы тем же цветом (или градиентом — да, мы скоро до него доберемся). Мы хотим нарисовать стрелку другим цветом — черным, а не серым, так что мы должны начать новый контур.
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
Вертикальная стрелка выглядит почти так же. Поскольку она того же цвета, что и горизонтальная стрелка, нам не нужно начинать еще один новый контур. Две стрелки будут частью одного и того же контура.
context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
Я сказал, что эти стрелки будут черными, но strokeStyle установлен в серый ( fillStyle и strokeStyle не сбрасываются, когда вы начинаете новый контур). Это нормально, потому что мы просто запустили серию «карандашных» методов. Но прежде чем нарисовать реально в «чернилах», мы должны установить strokeStyle черным. В противном случае эти две стрелки будут серыми, и мы вряд ли их заметим. Следующие строки изменяют цвет на черный и рисуют линии на холсте.
context.strokeStyle = «#000»;
context.stroke();
Текст
* Internet Explorer поддерживает только с библиотекой explorercanvas.
В дополнение к рисованию линий на холсте, вы также можете нарисовать текст. В отличие от текста окружающей веб-страницы, здесь нет боксовой модели. Это означает, что нет знакомых из CSS техник верстки: нет плавающих элементов, нет отступов, нет полей, нет переноса слов (хотя вы можете считать все это хорошей вещью). Вы можете установить несколько атрибутов шрифта, выбрать точку на холсте и нарисовать текст.
Следующие атрибуты шрифта доступны в контексте рисования.
Атрибут textBaseline хитрый, потому что сам текст такой (к тексту на английском это не относится, но вы ведь можете нарисовать любой символ Юникода). Спецификация HTML5 объясняет различия между базовыми линиями.
Верх площадки em (top) это примерно верх глифов в шрифте; выносная базовая линия (hanging) там, где привязаны некоторые глифы вроде आ; середина (middle) это половина между верхом и низом площадки em; алфавитная базовая линия (alphabetic) проходит там, где привязаны символы вроде Á, ÿ, f и Ω; идеографическая базовая линия (ideographic) располагается там, где привязаны символы вроде 私 и 達; низ площадки em это примерно низ глифов в шрифте. Верх и низ ограничивающего прямоугольника может быть далеко от базовой линии из-за того, что глифы выходят далеко за пределы прямоугольника em.
Изменение стиля шрифта
context.font = «bold 12px sans-serif»;
context.fillText(«x», 248, 43);
context.fillText(«y», 58, 165);
Метод fillText рисует собственно текст.
context.font = «bold 12px sans-serif»;
context.fillText(«x», 248, 43);
context.fillText(«y», 58, 165);
Спроси профессора Маркапа
☞ В. Могу ли я использовать относительные размеры шрифтов для рисования текста на холсте?
Для текста в левом верхнем углу, скажем, хочу, чтобы верх текста был при y=5. Но я ленивый, не хочу измерять высоту текста и вычислять базовую линию. Вместо этого я установлю textBaseline как top и укажу координаты левого верхнего угла окружающего текст прямоугольника.
Упс! Мы забыли точки в углах. Мы увидим, как рисовать окружности чуть позже. Пока же я немного схитрю и нарисую их в виде прямоугольников.
context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);
И это все что написано! Вот финальный результат.
Градиенты
| Градиент | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Линейный | 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
| Радиальный | — | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Ранее в этой главе вы узнали, как нарисовать прямоугольник заполненный цветом, затем как обводить линию заданным цветом. Но формы и линии не ограничены сплошным цветом, вы можете воспользоваться всеми видами магии с градиентами. Давайте посмотрим на примере.
Разметка выглядит так же, как любой другой холст.
Вначале мы должны обнаружить элемент и его контекст рисования.
var d_canvas = document.getElementById(«d»);
var context = d_canvas.getContext(«2d»);
После того как мы задали контекст, можем определить градиент. Градиент это плавный переход между двумя или более цветами. Контекст рисования холста поддерживает два типа градиента:
Давайте сделаем линейный градиент. Градиенты могут быть любого размера, но я сделаю этот градиент шириной 300 пикселей, как и холст.
Создание градиентного объекта
var my_gradient = context.createLinearGradient(0, 0, 300, 0);
Поскольку значения у второго и четвертого параметра равно 0, этот градиент будет заполнен слева направо.
После того как мы получили градиентный объект, мы можем определить цвета градиента. Градиент имеет два или более цвета остановки, которые могут быть в любом месте вдоль градиента. Чтобы добавить цвет остановки, необходимо указать его позицию вдоль градиента, она может быть от 0 до 1.
Давайте определим градиент от черного цвета к белому.
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
Определение градиента не рисует что-либо на холсте, это просто объект, спрятанный где-то в памяти. Чтобы нарисовать градиент, установите fillStyle в градиент и нарисуйте фигуру вроде прямоугольника или линии.
Стиль заполнения градиентом
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Предположим, вы хотите градиент сверху вниз. Когда вы создаете градиентный объект, оставьте значения x (первый и третий параметр) постоянными и сделайте значения y (второй и четвертый параметр) в диапазоне от 0 до высоты холста.
Значения x равны 0, значения y меняются
var my_gradient = context.createLinearGradient( 0, 0, 0, 225 );
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Вы также можете сделать градиент по диагонали.
Оба значения x и y меняются
var my_gradient = context.createLinearGradient( 0, 0, 300, 225 );
my_gradient.addColorStop(0, «black»);
my_gradient.addColorStop(1, «white»);
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
Изображения
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
* Internet Explorer поддерживает только с библиотекой explorercanvas.
Контекст рисования холста определяет метод drawImage() для вывода изображений. Этот метод может иметь три, пять или девять аргументов.
Спецификация HTML5 поясняет параметры drawImage() :
Исходный прямоугольник это прямоугольник (в пределах исходного изображения), чьи углы это четыре точки (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
Прямоугольник назначения это прямоугольник (в холсте), чьи углы в четырех точках (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).
Чтобы нарисовать изображение на холсте, у вас должно быть изображение. Это может быть существующий элемент или вы можете создать объект Image() через JavaScript. В любом случае вы должны убедиться, что изображение полностью загружено, прежде чем его можно нарисовать на холсте.
src=»http://htmlbook.ru/html5/images/cat.png» alt=»Спящий кот» width=»177″ height=»113″>
Использование объекта Image()
Необязательные третий и четвертый параметры в методе drawImage() управляют масштабом изображения. То же самое изображение масштабировано до половины его ширины и высоты и повторяется с разными координатами в пределах одного холста.
Вот скрипт который производит «многокошечный» эффект.
cat.onload = function() <
for (var x = 0, y = 0;
x 88, 56 );
>
>;
Простой ответ в том, что вы также можете нарисовать текст на холсте. График координат включает текст, линии и формы. Более сложные диаграммы легко могут использовать drawImage() для включения иконок, спрайтов или других графических элементов.
