Чтение онлайн

на главную - закладки

Жанры

JavaScript. Подробное руководство, 6-е издание
Шрифт:

CanvasPattern createPattern(Element image, string repetition)

Создает и возвращает объект

CanvasPattern
шаблона, определяющего повторяющееся изображение. Аргумент
image
должен быть элементом
<img>, <canvas>
или
<video>,
содержащим изображение, которое будет использоваться как шаблон. Аргумент
repetition
определяет, как будет выкладываться мозаика. Ниже перечислены допустимые значения:

Чтобы рисовать линии или заполнять фигуры с использованием шаблона, необходимо присвоить объект

CanvasPattern
свойству
strokeStyle
или
fillStyle
.

CanvasGradient createRadialGradient(double x0, y0, r0, x1, y1, r1)

Создает и возвращает новый объект

CanvasGradient
, который выполняет радиальную интерполяцию цветов между двумя заданными окружностями. Обратите внимание: этот метод не определяет цвета градиента. Для этих целей следует использовать метод
addColorStop
вновь созданного объекта. Чтобы рисовать линии или заполнять фигуры с помощью градиента, необходимо присвоить объект
СапvasGradient
свойству
strokeStyle
или
fillStyle
.

Радиальные градиенты отображаются с использованием цвета со смещением 0 для первой окружности, со смещением 1 для второй окружности и интерполированными цветами (красная, зеленая и синяя составляющие, а также альфа-компонент) для рисования промежуточных окружностей.

void drawImage(Element image, double dx, dy, [dw, dh])

Копирует изображение в аргументе

image
(значением которого должен быть элемент
<img>, <canvas>
или
<video>
) на холст, помещая верхний левый угол изображения в точку (dx, dy). Если указаны аргументы dw и dh, изображение будет масштабировано так, чтобы оно уместилось в область шириной dw пикселов и высотой dh пикселов.

void drawImage(Element image, double sx, sy, sw, sh, dx, dy, dw, dh)

Эта версия метода

drawImage
копирует прямоугольную область изображения image в заданную область холста. Значением аргумента image должен быть элемент
<img>, <canvas>
или
<video>
. Координаты точки (sx,sy) определяют верхний левый угол прямоугольной области в исходном изображении, а аргументы sw и sh - ширину и высоту этой области. Обратите внимание, что значения аргументов измеряются в CSS-пикселах и на них не влияют действующие преобразования системы координат. Остальные аргументы определяют прямоугольную область холста, куда должно быть скопировано изображение: подробности приводятся в описании версии метода
drawImage
с пятью аргументами выше. Обратите внимание, что аргументы, определяющие прямоугольную область холста, преобразуются в соответствии с текущей матрицей преобразований.

void fill

Метод

fill
выполняет заливку текущего контура цветом, градиентом или шаблоном, заданным свойством
fillStyle
. Любой незамкнутый подконтур заполняется так, как если бы для него неявно был вызван метод
closePath.
(Обратите внимание: это не означает, что вызов этого метода сделает подконтур замкнутым.) Операция заливки текущего контура не очищает его. Можно сразу вслед за методом
fill
вызвать метод
stroke
без повторного определения пути.

Когда контур пересекает сам себя или состоит из нескольких накладывающихся друг на друга подконтуров, метод

fill
пользуется правилом ненулевого числа оборотов для определения, какие точки находятся внутри, а какие вне контура. Это означает, например, что если контур определяет квадрат внутри окружности и подконтур квадрата нарисован в направлении, противоположном направлению рисования окружности, то область внутри квадрата будет считаться лежащей вне контура и не будет заполняться.

void fillRect(double х, у, width, height)

Метод

fillRect
выполняет заливку заданного прямоугольника цветом, градиентом или шаблоном, который задается свойством
fillStyle
.

В отличие от метода

rect,
метод
fillRect
не влияет на текущую позицию пера и текущий контур.

void fillText(string text, double x, у, [double maxWidth])

Метод

fillText
рисует текст
text
, используя текущие значения свойств
font
и
fillStyle
. Аргументы х и у определяют координаты, где должен выводиться текст, но интерпретация этих аргументов зависит от свойств
textAlign
и
textBaseline
, соответственно.

Если свойство

textAlign
имеет значение «left» или «start» (по умолчанию), в случае использования направления для письма слева направо (также по умолчанию), или «end» в случае использования письма справа налево, текст выводится правее указанной координаты X. Если свойство
textAlign
имеет значение «center», текст центрируется по горизонтали относительно указанной координаты X. В противном случае (если
textAlign
имеет значение «right», «end» для письма слева направо или «start» для письма справа налево) текст выводится левее указанной координаты X. Если свойство
textBaseline
имеет значение «alphabetic» (по умолчанию), «bottom» или «ideographic», большинство символов будут нарисованы выше указанной координаты Y. Если свойство
textBaseline
имеет значение «center», текст будет центрироваться по вертикали относительно указанной координаты Y. А если свойство
textBaseline
имеет значение «top» или «hanging», большинство символов будут нарисованы ниже указанной координаты Y.

Необязательный аргумент

maxWidth
определяет максимальную ширину текста. Если текст в аргументе
text
окажется шире, чем определено аргументом
maxWidth
, он будет нарисован более мелким или более узким шрифтом.

ImageData getImageData(double sx, sy, siv, sh)

Аргументы этого метода определяют непреобразованные координаты прямоугольной области холста. Метод копирует пикселы из этой области холста в новый объект

ImageData
и возвращает этот объект. Как получить доступ к составляющим цвета и альфа-компонентам отдельных пикселов, описывается в справочной статье
ImageData
.

Компоненты RGB цвета возвращаемых пикселов не учитывают значение альфа-компонента. Если какая-либо часть запрошенной области оказывается за границами холста, соответствующие пикселы в объекте

ImageData
устанавливаются в черный прозрачный цвет (все компоненты цвета равны нулю). Если для представления одного CSS-пиксела реализация использует несколько аппаратных пикселов, значения свойств
width
и
height
возвращаемого объекта
ImageData
будут отличаться от значений аргументов sw и sh.

Поделиться:
Популярные книги

Я еще князь. Книга XX

Дрейк Сириус
20. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я еще князь. Книга XX

Легат

Прокофьев Роман Юрьевич
6. Стеллар
Фантастика:
боевая фантастика
рпг
6.73
рейтинг книги
Легат

Младший сын

Балашов Дмитрий Михайлович
1. Государи московские
Научно-образовательная:
история
8.50
рейтинг книги
Младший сын

Запечатанный во тьме. Том 2

NikL
2. Хроники Арнея
Фантастика:
уся
эпическая фантастика
фэнтези
5.00
рейтинг книги
Запечатанный во тьме. Том 2

Барон нарушает правила

Ренгач Евгений
3. Закон сильного
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Барон нарушает правила

Кодекс Охотника. Книга IV

Винокуров Юрий
4. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Кодекс Охотника. Книга IV

Око василиска

Кас Маркус
2. Артефактор
Фантастика:
городское фэнтези
попаданцы
аниме
5.00
рейтинг книги
Око василиска

Казань

Вязовский Алексей
2. Русский бунт
Фантастика:
альтернативная история
4.50
рейтинг книги
Казань

Курс 1. Октябрь

Фокс Гарри
2. Маркатис
Фантастика:
аниме
фэнтези
сказочная фантастика
5.00
рейтинг книги
Курс 1. Октябрь

Проданная Истинная. Месть по-драконьи

Белова Екатерина
Любовные романы:
любовно-фантастические романы
5.00
рейтинг книги
Проданная Истинная. Месть по-драконьи

Черный рынок

Вайс Александр
6. Фронтир
Фантастика:
боевая фантастика
космическая фантастика
космоопера
5.00
рейтинг книги
Черный рынок

Я уже царь. Книга XXIX

Дрейк Сириус
29. Дорогой барон!
Фантастика:
юмористическое фэнтези
аниме
попаданцы
5.00
рейтинг книги
Я уже царь. Книга XXIX

Бандит 2

Щепетнов Евгений Владимирович
2. Петр Синельников
Фантастика:
боевая фантастика
5.73
рейтинг книги
Бандит 2

Запечатанный во тьме. Том 1. Тысячи лет кача

NikL
1. Хроники Арнея
Фантастика:
уся
эпическая фантастика
фэнтези
5.00
рейтинг книги
Запечатанный во тьме. Том 1. Тысячи лет кача