Шрифт:
object getContext(string contextld, [любые аргументы...])
Возвращает объект, посредством которого выполняется рисование в элементе
Canvas
. Если передать ему строку «2d», он вернет объект CanvasRenderingContext2D
, реализующий рисование на двухмерной плоскости. В этом случае не требуется передавать никаких дополнительных аргументов. Для каждого элемента
<canvas>
существует только один объект CanvasRenderingContext2D
, т.е. повторные вызовы getContext("2d")
будут возвращать тот же самый объект. Спецификация HTML5 стандартизует аргумент «2d» для этого метода и не определяет других допустимых аргументов. В настоящее время разрабатывается отдельный стандарт, WebGL, для трехмерной графики. В броузерах, поддерживающих его, этому методу можно передать строку «webgl», чтобы получить объект, обеспечивающий создание трехмерных изображений.
Следует, однако, отметить, что в данной книге описывается только объект
CanvasRenderingContext2D
.
string toDataURL([string type], [любые аргументы...])
Метод
toDataURL
возвращает растровое изображение холста в виде URL-адреса data://, который можно использовать в теге <img>
или передавать по сети. Например:
// Скопировать содержимое холста в элемент <img> и добавить его в документ
var canvas = document.getElementById("my_canvas");
var image = document.createElement("img");
image.src = canvas.toDataURL;
document.body.appendChild(image):
Аргумент
type
определяет, какой МІМЕ-тип или графический формат изображения следует использовать. Если этот аргумент отсутствует, используется значение по умолчанию «image/png». Формат PNG является единственным, который обязаны поддерживать все реализации. Чтобы получить изображение в другом формате, отличном от PNG, можно передать дополнительные аргументы, определяющие порядок кодирования. Например, если в аргументе type передается строка «image/jpeg»» во втором аргументе следует передать число в диапазоне от 0 до 1, определяющее уровень качества изображения. На момент написания этих строк никаких других аргументов стандартизовано не было. Для предотвращения утечки информации между документами с разным происхождением метод
toDataURL
не будет работать с тегами <canvas>,
которые имеют «неясное происхождение». Считается, что элемент <canvas>
имеет неясное происхождение, если в нем содержалось изображение (созданное непосредственно с помощью метода drawImage
или косвенно, с помощью объекта CanvasPattern
), имеющее иное происхождение, отличное от происхождения содержащего его документа. Кроме того, считается, что элемент <canvas>
имеет неясное происхождение, если в нем рисовался текст с использованием веб-шрифтов, имеющих иное происхождение. CanvasGradient
цветной градиент для использования в элементе Canvas
Объект
CanvasGradient
представляет цветовой градиент, который может быть присвоен свойствам strokeStyle
и fillStyle
объекта CanvasRenderingContext2D
. Объект CanvasGradient
возвращается методами createLinearGradient
и createRadialGradient
объекта CanvasRenderingContext2D
. После создания объекта
CanvasGradient
следует вызвать метод addColorStop
и с его помощью определить, какой цвет в какой позиции должен отображаться внутри градиента. Между заданными позициями цвет будет интерполироваться так, чтобы создать эффект плавного перехода или исчезновения цвета. Если не определить цвет ни в одной позиции, градиент будет окрашен однородным прозрачным черным цветом. Методы
void addColorStop(double offset, string color)
Метод
addColorStop
определяет фиксированные цвета внутри градиента. В аргументе color
передается строка с названием цвета в формате CSS. В аргументе offset
передается значение с плавающей точкой в диапазоне от 0.0 до 1.0, которое представляет позицию между началом и концом градиента. Значение 0 соответствует начальной позиции, значение 1 - конечной.