<b>image.src = canvas.toDataURL();</b>
<b>document.body.appendChild(image):</b>
Аргумент
<b>type</b>
определяет, какой МІМЕ-тип или графический формат изображения следует использовать. Если этот аргумент отсутствует, используется значение по умолчанию «image/png». Формат PNG является единственным, который обязаны поддерживать все реализации. Чтобы получить изображение в другом формате, отличном от PNG, можно передать дополнительные аргументы, определяющие порядок кодирования. Например, если в аргументе type передается строка «image/jpeg»» во втором аргументе следует передать число в диапазоне от 0 до 1, определяющее уровень качества изображения. На момент написания этих строк никаких других аргументов стандартизовано не было.
Для предотвращения утечки информации между документами с разным происхождением метод
<b>toDataURL()</b>
не будет работать с тегами
<b><canvas>,</b>
которые имеют «неясное происхождение». Считается, что элемент
<b><canvas></b>
имеет неясное происхождение, если в нем содержалось изображение (созданное непосредственно с помощью метода
<b>drawImage()</b>
или косвенно, с помощью объекта
<b>CanvasPattern</b>
), имеющее иное происхождение, отличное от происхождения содержащего его документа. Кроме того, считается, что элемент
<b><canvas></b>
имеет неясное происхождение, если в нем рисовался текст с использованием веб-шрифтов, имеющих иное происхождение.
CanvasGradient
цветной градиент для использования в элементе Canvas
Объект
<b>CanvasGradient</b>
представляет цветовой градиент, который может быть присвоен свойствам
<b>strokeStyle</b>
и
<b>fillStyle</b>
объекта
<b>CanvasRenderingContext2D</b>
. Объект
<b>CanvasGradient</b>
возвращается методами
<b>createLinearGradient()</b>
и
<b>createRadialGradient()</b>
объекта
<b>CanvasRenderingContext2D</b>
.
После создания объекта
<b>CanvasGradient</b>
следует вызвать метод
<b>addColorStop()</b>
и с его помощью определить, какой цвет в какой позиции должен отображаться внутри градиента. Между заданными позициями цвет будет интерполироваться так, чтобы создать эффект плавного перехода или исчезновения цвета. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.
Методы
<b>void addColorStop(double offset, string color)</b>
Метод
<b>addColorStop()</b>
определяет фиксированные цвета внутри градиента. В аргументе
<b>color</b>
передается строка с названием цвета в формате CSS. В аргументе
<b>offset</b>
передается значение с плавающей точкой в диапазоне от 0.0 до 1.0, которое представляет позицию между началом и концом градиента. Значение 0 соответствует начальной позиции, значение 1 - конечной.
Если указать два или более цвета, градиент создаст эффект плавного перехода цветов между указанными позициями. Перед первой позицией будет отображаться цвет, соответствующий первой позиции. После последней позиции градиент будет отображать цвет, соответствующий последней позиции. Если определить цвет только для одной позиции, градиент будет окрашен одним цветом. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом.
CanvasPattern
шаблон заполнения холста на основе готового изображения
Объект
<b>CanvasPattern</b>
возвращается методом
<b>createPattern()</b>
объекта
<b>CanvasRenderingContext2D</b>
. Объект
<b>CanvasPattern</b>
может использоваться в качестве значения свойств
<b>strokeStyle</b>
и
<b>fillStyle</b>
объекта
<b>CanvasRenderingContext2D</b>
.
CanvasRenderingContext2D
объект, используемый для создания изображений
Объект
<b>CanvasRenderingContext2D</b>
предоставляет набор свойств и методов для рисования двухмерных графических изображений. Следующие разделы содержат краткий обзор его возможностей. Дополнительная информация приводится в разделе 21.4, а также в справочных статьях
<b>Canvas, CanvasGradient, CanvasPattern, ImageData</b>
и
<b>TextMetrics</b>
.
Создание и отображение контуров
Очень мощная особенность элемента
<b>Canvas</b>
заключается в возможности строить фигуры с помощью элементарных операций рисования и затем отображать их либо в виде ограничивающих фигуру линий, либо заполнять их. Собранные воедино операции рисования называются текущим контуром. Элемент
<b>Canvas</b>
поддерживает возможность работы лишь с одним текущим контуром.
Для построения связанной фигуры из отдельных сегментов для каждой промежуточной операции рисования должна быть определена точка присоединения. Для этой цели
<b>Canvas</b>
поддерживает текущую позицию. Операции рисования неявно используют ее в качестве начальной точки и обычно переустанавливают текущую позиции в свою конечную точку. Это можно представить себе как перемещение пера по листу бумаги: когда заканчивается рисование отдельной линии, текущей становится позиция, в которой было остановлено движение пера.
Существует возможность создать в текущем контуре несколько несвязанных фигур, которые должны отображаться с одними и теми же параметрами рисования. Для отделения фигур используется метод
<b>moveTo();</b>
он перемещает текущую позицию в новые координаты без добавления линии, связывающей точки. Когда вызывается этот метод, создается новый вложенный контур, или подконтур, который в терминах элемента
<b>Canvas</b>
используется для объединения связанных операций.
Из доступных операций рисования можно упомянуть:
<b>lineТо()</b>
- рисование отрезков прямых линий,
<b>rect()</b>
- рисование прямоугольников,
<b>агс()</b>
и
<b>arcTo()</b>
- рисование дуг,
<b>bezierCurveTo()</b>
и
<b>quadraticCurveTo()</b>
- рисование кривых.
