为什么 getContext() 在 Ubuntu 上的 Chrome 上返回 null

Question

为什么 getContext() 在现有画布元素上调用时返回 null，但在 createElement('canvas').getContext() 时工作​​正常？

Ubuntu 18.04 上的 Chrome 72.0.3626.121

查看 chrome 控制台：

Answer 1

这对 Ubuntu 来说并不特殊。您只能从特定画布获取一种类型的上下文。一旦获得该画布的上下文（a），您就无法获得同一画布的任何其他类型的上下文，并且（b）如果您在该画布上请求相同类型的上下文，您将获得与您获得的相同的上下文第一次，不是新的

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

关于 it 返回相同的上下文

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