OffscreenCanvasRenderingContext2D

Интерфейс OffscreenCanvasRenderingContext2D — это контекст отрисовки CanvasRenderingContext2D для рисования на растровом изображении объекта OffscreenCanvas. Он похож на объект CanvasRenderingContext2D, с следующими отличиями:

• нет поддержки функций пользовательского интерфейса (drawFocusIfNeeded)
• атрибут canvas ссылается на объект OffscreenCanvas вместо элемента <canvas>
• растровое изображение для элемента-заполнителя <canvas>, принадлежащего объекту OffscreenCanvas , обновляется во время обновления отрисовки потока выполнения Window или Worker , которому принадлежит OffscreenCanvas

Следующий фрагмент кода создает объект Worker с помощью конструктора Worker(). Метод transferControlToOffscreen() используется для получения объекта OffscreenCanvas из элемента <canvas>, чтобы он мог быть передан в поток выполнения:

const canvas = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

В потоке выполнения мы можем использовать OffscreenCanvasRenderingContext2D для рисования на растровом изображении объекта OffscreenCanvas:

onmessage = (event) => {
  const canvas = event.data.canvas;
  const offCtx = canvas.getContext("2d");
  // draw to the offscreen canvas context
  offCtx.fillStyle = "red";
  offCtx.fillRect(0, 0, 100, 100);
};

Для получения полного примера обратитесь к нашему примеру потока выполнения OffscreenCanvas на GitHub (запустить пример потока выполнения OffscreenCanvas).

Следующий метод является новым для интерфейса OffscreenCanvasRenderingContext2D и отсутствует в интерфейсе CanvasRenderingContext2D:

commit() Устаревший Нестандартный

Выполняет запись отрендеренного изображения в элемент-заполнитель <canvas> объекта контекста OffscreenCanvas.

Следующий метод пользовательского интерфейса не поддерживается интерфейсом OffscreenCanvasRenderingContext2D:

CanvasRenderingContext2D.drawFocusIfNeeded()

Если заданный элемент имеет фокус, этот метод рисует фокусную рамку вокруг текущей траектории.

Следующие свойства и методы унаследованы от CanvasRenderingContext2D. Они используются так же, как и в CanvasRenderingContext2D

CanvasRenderingContext2D.isContextLost()

Возвращает true , если контекст отрисовки был утерян.

CanvasRenderingContext2D.clearRect()

Задает все пиксели в прямоугольнике, определенном начальной точкой (x, y) и размером (ширина, высота), на прозрачный черный цвет, стирает ранее нарисованное содержимое.

CanvasRenderingContext2D.fillRect()

Рисует заполненный прямоугольник в позиции (x, y), размер которого определяется значениями ширина и высота.

CanvasRenderingContext2D.strokeRect()

Рисует прямоугольник с начальной точкой в (x, y), шириной w и высотой h на холсте, используя текущий стиль обводки.

Следующие методы и свойства управляют рисованием текста. См. также объект TextMetrics для свойств текста.

CanvasRenderingContext2D.fillText()

Рисует (заливает) заданный текст в заданной позиции (x, y).

CanvasRenderingContext2D.strokeText()

Рисует (обводит) заданный текст в заданной позиции (x, y).

CanvasRenderingContext2D.measureText()

Возвращает объект TextMetrics.

CanvasRenderingContext2D.textRendering

Отрисовка текста. Возможные значения: auto (по умолчанию), optimizeSpeed, optimizeLegibility,

Следующие методы и свойства управляют тем, как рисуются линии.

CanvasRenderingContext2D.lineWidth

Ширина линий. По умолчанию 1.0.

CanvasRenderingContext2D.lineCap

Тип окончаний линий. Возможные значения: butt (по умолчанию), round, square.

CanvasRenderingContext2D.lineJoin

Определяет тип углов, где встречаются две линии. Возможные значения: round, bevel, miter (по умолчанию).

CanvasRenderingContext2D.miterLimit

Коэффициент ограничения скругления. По умолчанию 10.

CanvasRenderingContext2D.getLineDash()

Возвращает текущий массив шаблонов пунктирной линии, содержащий четное число неотрицательных чисел.

CanvasRenderingContext2D.setLineDash()

Устанавливает текущий шаблон пунктирной линии.

CanvasRenderingContext2D.lineDashOffset

Указывает, где начать массив штрихов на линии.

Следующие свойства управляют тем, как выводится текст.

CanvasRenderingContext2D.font

Настройка шрифта. Значение по умолчанию 10px sans-serif.

CanvasRenderingContext2D.textAlign

Настройка выравнивания текста. Возможные значения: start (по умолчанию), end, left, right, center.

CanvasRenderingContext2D.textBaseline

Настройка выравнивания базовой линии. Возможные значения: top, hanging, middle, alphabetic (по умолчанию), ideographic, bottom.

CanvasRenderingContext2D.direction

Направление. Возможные значения: ltr, rtl, inherit (по умолчанию).

CanvasRenderingContext2D.letterSpacing

Межбуквенное расстояние. По умолчанию: 0px.

CanvasRenderingContext2D.fontKerning

Керинг шрифта. Возможные значения: auto (по умолчанию), normal, none.

CanvasRenderingContext2D.fontStretch

Растяжение шрифта. Возможные значения: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (по умолчанию), semi-expanded, expanded, extra-expanded, ultra-expanded.

CanvasRenderingContext2D.fontVariantCaps

Вариант шрифта с заглавными буквами. Возможные значения: normal (по умолчанию), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.

CanvasRenderingContext2D.textRendering Экспериментальный

Отображение текста. Возможные значения: auto (по умолчанию), optimizeSpeed, optimizeLegibility, geometricPrecision.

CanvasRenderingContext2D.wordSpacing

Межсловное расстояние. Значение по умолчанию: 0px

Стиль заливки используется для цветов и стилей внутри фигур, а стиль обводки — для линий вокруг фигур.

CanvasRenderingContext2D.fillStyle

Цвет или стиль, используемый внутри фигур. По умолчанию #000 (чёрный).

CanvasRenderingContext2D.strokeStyle

Цвет или стиль, используемый для линий вокруг фигур. По умолчанию #000 (чёрный).

CanvasRenderingContext2D.createConicGradient()

Создаёт конический градиент вокруг точки, заданной координатами в параметрах.

CanvasRenderingContext2D.createLinearGradient()

Создаёт линейный градиент вдоль линии, заданной координатами в параметрах.

CanvasRenderingContext2D.createRadialGradient()

Создаёт радиальный градиент, заданный координатами двух окружностей в параметрах.

CanvasRenderingContext2D.createPattern()

Создаёт узор, используя указанное изображение. Он повторяет источник в направлениях, указанных в аргументе повторения. Этот метод возвращает CanvasPattern.

CanvasRenderingContext2D.shadowBlur

Указывает эффект размытия. По умолчанию: 0.

CanvasRenderingContext2D.shadowColor

Цвет тени. По умолчанию: полностью прозрачный чёрный.

CanvasRenderingContext2D.shadowOffsetX

Горизонтальное смещение тени. По умолчанию: 0.

CanvasRenderingContext2D.shadowOffsetY

Вертикальное смещение тени. По умолчанию: 0.

Следующие методы могут использоваться для управления контурами объектов.

CanvasRenderingContext2D.beginPath()

Начинает новый контур, очищая список подконтуров. Вызовите этот метод, когда необходимо создать новый контур.

CanvasRenderingContext2D.closePath()

Перемещает точку пера обратно к началу текущего подконтура. Попытка провести прямую линию от текущей точки к началу. Если фигура уже закрыта или имеет только одну точку, эта функция ничего не делает.

CanvasRenderingContext2D.moveTo()

Перемещает начальную точку нового подконтура в координаты (x, y).

CanvasRenderingContext2D.lineTo()

Соединяет последнюю точку в текущем подконтуре с заданными координатами (x, y) прямой линией.

CanvasRenderingContext2D.bezierCurveTo()

Добавляет кубическую кривую Безье к текущему контуру.

CanvasRenderingContext2D.quadraticCurveTo()

Добавляет квадратичную кривую Безье к текущему контуру.

CanvasRenderingContext2D.arc()

Добавляет дугу окружности к текущему контуру.

CanvasRenderingContext2D.arcTo()

Добавляет дугу к текущему контуру с заданными контрольными точками и радиусом, соединённую с предыдущей точкой прямой линией.

CanvasRenderingContext2D.ellipse()

Добавляет эллиптическую дугу к текущему контуру.

CanvasRenderingContext2D.rect()

Создаёт контур прямоугольника в позиции (x, y) с размером, определяемым значениями width и height.

CanvasRenderingContext2D.roundRect()

Создаёт контур прямоугольника с закруглёнными углами в позиции (x, y) с размером, определяемым значениями width и height, и радиусами, определяемыми значением radii.

CanvasRenderingContext2D.fill()

Заливает текущие подконтуры текущим стилем заливки.

CanvasRenderingContext2D.stroke()

Отображает текущие подконтуры текущим стилем обводки.

CanvasRenderingContext2D.clip()

Создаёт область обрезки из текущих подконтуров. Всё, что нарисовано после вызова clip(), отображается только внутри области обрезки. Пример см. в руководстве по Canvas — Области обрезки.

CanvasRenderingContext2D.isPointInPath()

Указывает, содержится ли заданная точка в текущем контуре.

CanvasRenderingContext2D.isPointInStroke()

Указывает, содержится ли заданная точка внутри области, образованной обводкой контура.

Объекты в контексте отрисовки CanvasRenderingContext2D имеют текущую матрицу преобразования и методы для её манипулирования. Матрица преобразования применяется при создании текущей стандартной траектории, отрисовке текста, фигур и Path2D объектов. Перечисленные ниже методы остались по историческим причинам и для совместимости, так как в большинстве частей API сейчас и в будущем используются объекты DOMMatrix.

CanvasRenderingContext2D.getTransform()

Возвращает текущую матрицу преобразования, применяемую к контексту.

CanvasRenderingContext2D.rotate()

Добавляет поворот к матрице преобразования. Аргумент angle представляет собой угол поворота по часовой стрелке и выражается в радианах.

CanvasRenderingContext2D.scale()

Добавляет масштабирование к единицам измерения холста по оси X по горизонтали и по оси Y по вертикали.

CanvasRenderingContext2D.translate()

Добавляет сдвиг, перемещая холст и его начало по горизонтали на x и по вертикали на y единиц.

CanvasRenderingContext2D.transform()

Умножает текущую матрицу преобразования на матрицу, описываемую её аргументами.

CanvasRenderingContext2D.setTransform()

Сбрасывает текущее преобразование до единичной матрицы и затем вызывает метод transform() с теми же аргументами.

CanvasRenderingContext2D.resetTransform()

Сбрасывает текущее преобразование до единичной матрицы.

CanvasRenderingContext2D.globalAlpha

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

CanvasRenderingContext2D.globalCompositeOperation

Применяя globalAlpha, устанавливается способ отрисовки фигур и изображений поверх существующего битового изображения.

CanvasRenderingContext2D.drawImage()

Отрисовывает указанное изображение. Этот метод доступен в нескольких форматах, обеспечивая большую гибкость в использовании.

См. также объект ImageData.

CanvasRenderingContext2D.createImageData()

Создаёт новый пустой объект ImageData с указанными размерами. Все пиксели в новом объекте — прозрачный чёрный.

CanvasRenderingContext2D.getImageData()

Возвращает объект ImageData, представляющий данные пикселей для области холста, определяемой прямоугольником, начинающимся в точке (sx, sy) и имеющим ширину sw и высоту sh.

CanvasRenderingContext2D.putImageData()

Рисует данные из объекта ImageData на битовом изображении. Если указан прямоугольник изменения, то будут нарисованы только пиксели из этого прямоугольника.

CanvasRenderingContext2D.imageSmoothingEnabled

Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.

CanvasRenderingContext2D.imageSmoothingQuality

Позволяет установить качество сглаживания изображений.

Контекст отрисовки CanvasRenderingContext2D содержит различные состояния стилей отрисовки (атрибуты для стилей линий, заливки, теней, текста). Следующие методы помогут вам работать с этим состоянием:

CanvasRenderingContext2D.save()

Сохраняет текущее состояние стиля отрисовки с помощью стека, так что вы можете восстановить его, используя restore().

CanvasRenderingContext2D.restore()

Восстанавливает состояние стиля отрисовки до последнего элемента стека состояния, сохранённого методом save().

CanvasRenderingContext2D.canvas

Только для чтения ссылка на объект OffscreenCanvas.

CanvasRenderingContext2D.getContextAttributes()

Возвращает объект, содержащий фактические атрибуты контекста. Атрибуты контекста можно запросить с помощью HTMLCanvasElement.getContext().

CanvasRenderingContext2D.reset()

Сбрасывает текущее состояние стиля отрисовки до значений по умолчанию.

CanvasRenderingContext2D.filter

Применяет CSS или SVG фильтр к холсту; например, для изменения яркости или размытия.

Следующий метод не поддерживается в интерфейсе OffscreenCanvasRenderingContext2D:

CanvasRenderingContext2D.drawFocusIfNeeded()

Если данный элемент имеет фокус, этот метод рисует рамку фокуса вокруг текущей траектории.

• HTMLCanvasElement
• <canvas>