html поле для рисования
CANVAS шаг за шагом: Основы
Предварительная «настройка» нашего холста
У нашего подопытного тега есть всего два атрибута — 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 известную у нас как Танчики, а вот и ссылка на 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, мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.
Сетка
Рисование прямоугольников
В отличие от SVG, поддерживает только одну примитивную фигуру: прямоугольник. Все другие фигуры должны быть созданы комбинацией одного или большего количества контуров (paths), набором точек, соединённых в линии. К счастью в ассортименте рисования контуров у нас есть функции, которые делают возможным составление очень сложных фигур.
Сначала рассмотрим прямоугольник. Ниже представлены три функции рисования прямоугольников в canvas:
fillRect(x, y, width, height) Рисование заполненного прямоугольника. strokeRect(x, y, width, height) Рисование прямоугольного контура. clearRect(x, y, width, height) Очистка прямоугольной области, делая содержимое совершенно прозрачным.
Каждая из приведённых функций принимает несколько параметров:
Ниже приведена функция draw(), использующая эти три функции.
Пример создания прямоугольных фигур
Этот пример изображён ниже.
| Screenshot | Live sample |
|---|---|
 |
Функция fillRect() рисует большой чёрный квадрат со стороной 100 px. Функция clearRect() вырезает квадрат 60х60 из центра, а функция strokeRect() создаёт прямоугольный контур 50х50 пикселей внутри очищенного квадрата.
На следующей странице мы рассмотрим две альтернативы методу clearRect(), и также увидим, как можно изменять цвет и стиль контура отображаемых фигур.
В отличие от функций создания контуров, которые будут рассмотрены в следующем разделе, все три функции создания прямоугольника сразу же отображаются на canvas.
Рисование контуров (path)
Создание фигур используя контуры происходит в несколько важных шагов:
Здесь приведены функции, которые можно использовать в описанных шагах:
Вторым шагом является вызов методов, определяемых видом контура, который нужно нарисовать. Их мы рассмотрим позднее.
Рисование треугольника
Например, код для рисования треугольника будет выглядеть как-то так:
Результат выглядит так:
| Screenshot | Live sample |
|---|---|
 |
Передвижение пера
moveTo(x, y) Перемещает перо в точку с координатами x и y.
Результат этого ниже:
| Screenshot | Live sample |
|---|---|
 |
Линии
Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.
| Screenshot | Live sample |
|---|---|
 |
Для рисования дуг и окружностей, используем методы arc() и arcTo().
Следующий пример немного сложнее, чем мы рассматривали ранее. Здесь нарисованы 12 различных дуг с разными углами и заливками.
Координаты x и y должны быть достаточно ясны. radius and startAngle — фиксированы. endAngle начинается со 180 градусов (полуокружность) в первой колонке и, увеличиваясь с шагом 90 градусов, достигает кульминации полноценной окружностью в последнем столбце.
Note: Этот пример требует немного большего холста (canvas), чем другие на этой странице: 150 x 200 pixels.
| Screenshot | Live sample |
|---|---|
 |
Безье и квадратичные кривые
Следующим типом доступных контуров являются кривые Безье, и к тому же доступны в кубическом и квадратичном вариантах. Обычно они используются при рисовании сложных составных фигур.
Различие между ними можно увидеть на рисунке, изображённом справа. Квадратичная кривая Безье имеет стартовую и конечную точки (синие точки) и всего одну контрольную точку (красная точка), в то время как кубическая кривая Безье использует две контрольные точки.
Параметры x и y в этих двух методах являются координатами конечной точки. cp1x и cp1y — координаты первой контрольной точки, а cp2x и cp2y — координаты второй контрольной точки.
Использование квадратичных или кубических кривых Безье может быть спорным выходом, так как в отличие от приложений векторной графики типа Adobe Illustrator, мы не имеем полной видимой обратной связи с тем, что мы делаем. Этот факт делает довольно сложным процесс рисования сложных фигур. В следующем примере мы нарисуем совсем простую составную фигуру, но, если у вас есть время и ещё больше терпения, можно создать более сложные составные фигуры.
В этом примере нет ничего слишком тяжёлого. В обоих случаях мы видим последовательность кривых, рисуя которые, в результате получим составную фигуру.
Квадратичные кривые Безье
В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.
| Screenshot | Live sample |
|---|---|
 |
Кубические кривые Безье
В этом примере нарисовано сердце с использованием кубических кривых Безье.
| Screenshot | Live sample |
|---|---|
 |
Прямоугольники
rect(x, y, width, height)
Добавляет в path прямоугольник, верхний левый угол которого указан с помощью (x, y) с вашими width и height
Когда этот метод вызван, автоматически вызывается метод moveTo() с параметрами (x, y). Другими словами, позиция курсора устанавливается в начало добавленного прямоугольника.
Создание комбинаций
До сих пор, в каждом примере использовался только один тип функции контуров для каждой фигуры.
Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные функции контуров, чтобы создать набор очень известных игровых персонажей.
Конечное изображение выглядит так:
| Screenshot | Live sample |
|---|---|
 |
Мы не будем подробно останавливаться на том, так как это на самом деле удивительно просто. Наиболее важные вещи, которые следует отметить, это использование свойства fillStyle в контексте рисования и использование функции утилиты (в данном случае roundedRect() ). Использование функций утилиты для битов чертежа часто может быть очень полезным и сократить количество необходимого кода, а также его сложность.
Path2D объекты
Path2D.addPath(path [, transform]) (en-US) Добавляет путь к текущему пути с необязательной матрицей преобразования.
Path2D пример
| Screenshot | Live sample |
|---|---|
 |
Использование SVG путей
Ещё одна мощная функция нового Canvas Path2D API использует данные пути SVG, SVG path data, для инициализации путей на вашем холсте. Это может позволить вам передавать данные пути и повторно использовать их как в SVG, так и в холсте.
Рисование встроенными средствами HTML5 (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).
Элемент ‹canvas›
Элемент ‹canvas› создает контекст отрисовки, на котором в будущем можно создавать и манипулировать объектами javascript. Другими словами, ‹canvas› представляет собой прямоугольную область, в которой с помощью javascript можно «рисовать».
На сегодняшний день стандарт полностью описывает работу двумерных контекстов (для плоской графики, 2D). Однако, сейчас проводится работа по разработке стандарта WebGL, для поддержки элементом ‹canvas› трехмерных контекстов (примеры работ можно посмотреть в Лаборатории Chrome).
Для размещения элемента на странице HTML достаточно указать:
‹canvas width=600 height=250› ‹/canvas›
После помещения на страницу элементом ‹canvas› можно манипулировать как угодно: помещать на него текст, рисовать графические элементы и линии, выполнять заливку, добавлять анимацию. Все это делается при помощи команд javascript. Чтобы использовать холст программным путем необходимо прежде всего получить доступ к его контексту. После этого выполняются все необходимые действия с контекстом и только тогда результат подтверждается и выводится на холст. То есть, сначала изображение создается программно, а потом результат выводится визуально.
Так как не все браузеры поддерживают HTML5, то на данное время воспользоваться ‹canvas› можно только в следующих браузерах (по информации caniuse.com):
В случае, если к ‹canvas› обратились из браузера, который не поддерживает этот элемент, то пользователь увидит содержимое, помещенное внутри этого тега (такое содержимое называют аварийным), например:
‹canvas› Your browser is not support HTML5 Canvas! Please update your browser version! ‹/canvas›
Рисование на холсте
В первой строке мы получам сам холст, а во второй с помощью вызова единственного метода объекта холста getContext() получаем контекст этого холста. Параметр 2D указывает на то, что получаемый нами контекст будет создавать плоское изображение (экземпляр объекта CanvasRenderingContext2D ).
Теперь можно приступить к рисованию. Следует помнить, что для рисования с помощью ‹canvas› потребуется понимание системы координат, где каждой точкой является пиксель на экране, а началом координат является верхний левый угол холста. Создадим новый холст, зададим для него атрибут id=canvas и добавим к нему рабочку, чтобы было удобнее следить за результатом:
‹canvas width=150 height=150 style=»border:1px solid #ccc;» ‹/canvas›
Результат вы можете видеть ниже:
Прямоугольники
Для отображения прямоугольных фигур используются следующие методы:
Изменим функцию CreateImage() для демонстрации рисования двух прямоугольников:
Если в код функции CreateImage() добавить строку
То получится следующий результат:
Работа с цветом и толщиной линий
Работа с пером
Рисование более сложных объектов производится с помощью виртуального «пера». Для работы с ним существует ряд методов. Прежде всего нужно понять разницу между двумя основными методами:
Результат работы скрипта представлен на нижнем рисунке
Рисование дуг и кривых
построит следующую дугу:
И в результате получится окружность:
Результат отображен на рисунке внизу:
Вставка текста
Существует два метода и несколько свойств для вывода и форматирования текста. Для вывода текста используют следующие методы:
Для форматирования текста есть несколько различный свойств:
Пример вывода текста:
Размещение на холсте внешних изображений
Кроме рисования графических элементов на холсте можно разместить уже готовое изображение в любом из стандартных форматов. Для этого необходимо создать экземпляр объекта Image. Пример использования:
Давайте порисуем
Перевод: Влад Мержевич
В 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() для включения иконок, спрайтов или других графических элементов.