OffscreenCanvas: метод getContext()

Базовая линия 2023 *

Новое

С марта 2023 года эта функция работает на последних устройствах и версиях браузеров. Эта функция может не работать на старых устройствах или браузерах.

* Некоторые части этой функции могут иметь разный уровень поддержки.

Примечание: Эта функция доступна в Web Workers.

Метод OffscreenCanvas.getContext() возвращает контекст рисования для внеэкранного холста или null, если идентификатор контекста не поддерживается или внеэкранный холст уже задан в другом режиме контекста.

Синтаксис

getContext(contextType, contextAttributes)

Параметры

contextType

Строка, содержащая идентификатор контекста, определяющий контекст рисования, связанный с холстом. Возможные значения:

2d: Создаёт объект OffscreenCanvasRenderingContext2D, представляющий контекст двухмерного рендеринга.
webgl: Создаёт объект WebGLRenderingContext, представляющий контекст трёхмерного рендеринга. Этот контекст доступен только в браузерах, поддерживающих WebGL версии 1 (OpenGL ES 2.0).
webgl2: Создаёт объект WebGL2RenderingContext, представляющий контекст трёхмерного рендеринга. Этот контекст доступен только в браузерах, поддерживающих WebGL версии 2 (OpenGL ES 3.0).
"webgpu": Создаёт объект GPUCanvasContext, представляющий контекст трёхмерного рендеринга для конвейеров рендеринга WebGPU. Этот контекст доступен только в браузерах, поддерживающих API WebGPU.
bitmaprenderer: Создаёт ImageBitmapRenderingContext, который предоставляет только функциональность для замены содержимого холста заданным ImageBitmap.

Примечание: Идентификаторы "experimental-webgl" или "experimental-webgl2" также используются в реализациях WebGL. Эти реализации не достигли соответствия тест-набора, или ситуация с графическими драйверами на платформе ещё не стабильна. Группа Khronos сертифицирует реализации WebGL по определённым правилам соответствия.

contextAttributes

При создании контекста рендеринга можно использовать несколько атрибутов контекста, например:

offscreen.getContext("webgl", { antialias: false, depth: false });

Атрибуты контекста 2d:

alpha: Логическое значение, указывающее, содержит ли холст альфа-канал. Если установлено значение false, браузер теперь знает, что фон всегда непрозрачный, что может ускорить отрисовку прозрачного содержимого и изображений.
willReadFrequently: Логическое значение, указывающее, планируются ли много операций чтения. Это принудительно использует программный (а не ускоренный аппаратно) 2D холст и может сохранить память при частом вызове getImageData(). В Firefox этот параметр доступен только в том случае, если флаг gfx.canvas.willReadFrequently.enable установлен в true (что по умолчанию верно только для B2G/Firefox OS).

Атрибуты контекста WebGL:

alpha: Логическое значение, указывающее, содержит ли холст буфер альфа.
depth: Логическое значение, указывающее, что буфер рисования должен иметь буфер глубины не менее 16 бит.
stencil: Логическое значение, указывающее, что буфер рисования должен иметь буфер трафарета не менее 8 бит.
antialias: Логическое значение, указывающее, необходимо ли выполнять антиалиасинг, если это возможно.
premultipliedAlpha: Логическое значение, указывающее, что компоновщик страницы предположит, что буфер рисования содержит цвета с предварительно умноженной альфой.
preserveDrawingBuffer: Если значение равно true, буферы не будут очищаться и сохранят свои значения до их очистки или перезаписи автором.
failIfMajorPerformanceCaveat: Логическое значение, указывающее, будет ли создан контекст, если производительность системы низкая.

Возвращаемое значение

Контекст рендеринга, который является

OffscreenCanvasRenderingContext2D для "2d",
WebGLRenderingContext для "webgl" и "experimental-webgl",
WebGL2RenderingContext для "webgl2" и "experimental-webgl2",
GPUCanvasContext для "webgpu",
ImageBitmapRenderingContext для "bitmaprenderer".

Если идентификатор контекста не поддерживается или холст уже задан в другом режиме контекста, возвращается null.

Исключения

InvalidStateError DOMException: Бросается, если холст передан в другую область контекста, например, в рабочий процесс.

Примеры

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

gl; // WebGLRenderingContext
gl.canvas; // OffscreenCanvas

Спецификации

Спецификация
HTML # dom-offscreencanvas-getcontext-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`2d_context`	69	79	105	56	16.4	69	105	48	16.4	10.0	Нет
`getContext`	69	79	105	56	16.4	69	105	48	16.4	10.0	69
`bitmaprenderer_context`	76	79	105	63	16.4	76	105	54	16.4	12.0	Нет
`webgl2_context`	69	79	105	56	17	69	105	48	17	10.0	Нет
`webgl_context`	69	79	105	56	17	69	105	48	17	10.0	Нет
`webgpu_context`	113 В настоящее время поддерживается только на ChromeOS, macOS и Windows.	113 В настоящее время поддерживается только на ChromeOS, macOS и Windows.	105 В настоящее время поддерживается только на Linux и Windows.	99 В настоящее время поддерживается только на ChromeOS, macOS и Windows.	предварительный просмотр	121	Нет	81	Нет	25.0	121

См. также

Интерфейс, определяющий этот метод: OffscreenCanvas
HTMLCanvasElement.getContext()
Доступные контексты отрисовки: CanvasRenderingContext2D, WebGLRenderingContext, WebGL2RenderingContext, ImageBitmapRenderingContext и OffscreenCanvasRenderingContext2D

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext