MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

HTMLCanvasElement.getContext()

Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

HTMLCanvasElement.getContext() метод повертає  контекст малюнка на полотні чи  null, якщо ідентифікатор контексту не підтримується. 

Синтаксис

canvas.getContext(contextType, contextAttributes);

Параметри

contextType
Це DOMString, що містить ідентифікатор,  який визначає контекст малюнка пов'язаний з полотном. Можливі значення:
  • "2d", Створює CanvasRenderingContext2D об'єкт, що відображає контекст з двовимірною візуалізацією.
  • "webgl" (or "experimental-webgl") Утворює WebGLRenderingContext об'єкт, що відображає тривимірну візуалізацію контексту. Підтримується тільки в браузерах, що реалізують WebGL version 1 (OpenGL ES 2.0).
  • "webgl2" Утворює WebGL2RenderingContext об'єкт, що відображає тривимірну візуалізацію контексту. Підтримується тільки в браузерах, що реалізують WebGL version 2 (OpenGL ES 3.0).
  • "bitmaprenderer" Утворює ImageBitmapRenderingContext, який забезпечуює тільки одну функцію заміщення змісту полотна, наданим ImageBitmap.

Примітка: Ідентифікатор "experimental-webgl" використовується  в нових реалізаціях  WebGL. Ці реалізації не пройшли набір тестів на відповідність, або графічні драйвери на платформі ще не стабільні. Khronos Group сертіфікує WebGL реалізації за певними правилами - conformance rules.

contextAttributes

Ви можете використовувати декілька атрибутів контексту при створенні візуалізації, наприклад:

canvas.getContext('webgl', 
                 { antialias: false,
                   depth: false });
2d context attributes:
  • alpha: Boolean that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
  • (Gecko only) willReadFrequently: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently. This option is only available, if the flag gfx.canvas.willReadFrequently.enable is set to true (which, by default, is only the case for B2G/Firefox OS).
  • (Blink only) storage: String that indicates which storage is used ("persistent" by default).
WebGL context attributes:
  • alpha: Boolean that indicates if the canvas contains an alpha buffer.
  • depth: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
  • stencil: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
  • antialias: Boolean that indicates whether or not to perform anti-aliasing.
  • premultipliedAlpha: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
  • preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
  • failIfMajorPerformanceCaveat: Boolean that indicates if a context will be created if the system performance is low.

Return value

A RenderingContext which is either a

If the contextType doesn't match a possible drawing context, null is returned.

Examples

Given this <canvas> element:

<canvas id="canvas" width="300" height="300"></canvas>

You can get a 2d context of the canvas with the following code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }

Now you have the 2D rendering context for a canvas and you can draw within it.

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'HTMLCanvasElement.getContext' in that specification.
Living Standard No change since the latest snapshot, HTML5
HTML 5.1
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation  
HTML5
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation Snapshot of the WHATWG HTML Living Standard containing the initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (2d context) 4 (Yes) 3.6 (1.9.2) 9 9 3.1
webgl context 9[1]
33
(Yes) 3.6 (1.9.2)[1]
24 (24)
11.0[2] 9.0[3] 5.1[2]
webgl2 context  56 ? 25 (25)[4] No support No support No support
2d alpha context attribute 32 ? 30 (30) No support (Yes) No support

failIfMajorPerformanceCaveat attribute

(Yes) ? 41 (41) (Yes) (Yes) ?
bitmaprenderer context No support ? 46 (46) No support No support No support
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (2d context) (Yes) (Yes) (Yes) 1.0 (1.9.2) (Yes) (Yes) (Yes)
webgl context ? ? (Yes) (Yes)[2] ? ? ?
webgl2 context  No support No support ? No support No support No support No support
2d alpha context attribute No support No support ? 30.0 (30) No support No support No support
failIfMajorPerformanceCaveat attribute ? ? ? 41.0 (41) ? ? ?
bitmaprenderer context No support No support ? 46.0 (46) No support No support No support

[1] Chrome 9 and Gecko 1.9.2 initially implemented this as experimental-webgl. Since Chrome 33 and Gecko 24 it is implemented as the standard webgl.

[2] Internet Explorer 11, WebKit 5.1 and Firefox Mobile implemented this as experimental-webgl.

[3] Opera 9 implemented this as experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

[4] Gecko 25 implemented this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference and "experimental-webgl2" is no longer accepted

See also

Мітки документа й учасники

 Зробили внесок у цю сторінку: muhus
 Востаннє оновлена: muhus,