Почему getContext () возвращает ноль в Chrome в Ubuntu - PullRequest
0 голосов
/ 03 мая 2019

Почему getContext () возвращает ноль при вызове существующего элемента Canvas, но прекрасно работает, когда createElement ('canvas'). getContext ()?

Chrome 72.0.3626.121 в Ubuntu 18.04

см. Хромированную консоль: enter image description here

1 Ответ

1 голос
/ 04 мая 2019

Это не особенное для Ubuntu.Вы можете получить только один тип контекста из определенного холста.Как только вы получите контекст для этого холста (а) вы не сможете получить любой другой тип контекста для того же холста и (б) если вы попросите тот же тип контекста на этом холсте, вы получите тот же контекст, что и выв первый раз, а не новый

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');  // returns a Canvas2DRenderingContext
const gl = canvas.getContext('webgl');  // returns null because this canvas
                                        // already has a 2D context

То же самое верно и в другом случае

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');  // returns a WebGLRenderingContext
const ctx = canvas.getContext('2d');    // returns null because this canvas
                                        // already has a WebGL context

О том, что он возвращает тот же контекст

const canvas = document.createElement('canvas');
const ctx1 = canvas.getContext('2d');  // returns a Canvas2DRenderingContext
const ctx2 = canvas.getContext('2d');  // returns the same Canvas2DRenderingContext

console.log(ctx1 === ctx2);  // true
ctx1.foo = "bar";
console.log(ctx2.foo);  // "bar" because it's the same object

Каждый контекстпринадлежит конкретному холсту.Другой холст получит другой контекст

const canvas1 = document.createElement('canvas');
const canvas2 = document.createElement('canvas');
const ctx1 = canvas1.getContext('2d');  // returns a Canvas2DRenderingContext
const ctx2 = canvas2.getContext('2d');  // returns a different Canvas2DRenderingContext

console.log(ctx1 === ctx2);  // false
...