为什么 HTML canvas getContext() 方法名为 getContext() 而不是 setContext()？

Question

根据此方法的使用方式，渲染上下文似乎是 html canvas 元素的“设置”。您可以将其设置为“2d”、“webgl”、“webgl2”或“webgpu”

对于 JavaScript 中的其他方法，如 getElementById()、getElementsByClassName()，它“获取”html 文档中已经存在的一些元素。

在 getContext() 方法的情况下，它不会获取已存在于某处的渲染上下文，而是创建一个新的渲染上下文或为所选画布元素选择渲染上下文设置选项。那么为什么这个方法被命名为 HTMLCanvasElement.getContext() 而不是 HTMLCanvasElement.setContext() 呢？将其命名为 HTMLCanvasElement.setContext() 不是更有意义吗？

此外，在Canvas API文档页面的“渲染上下文”中，写着： “该元素创建一个固定大小的绘图表面，公开一个或多个渲染上下文......”

但是，在 HTMLCanvasElement: getContext() 方法 页面上，显示： “在给定的画布元素上不可能获得不同的绘图上下文对象。”

这两种说法是不是矛盾？我很困惑。

Answer 1

getContext() 确实是一个 getter - 它只在不存在的情况下创建一个上下文。 “一个或多个”部分指的是每个contextType中的恰好一个可能存在的事实。 如果删除 contextType 参数，基本的单例 getter 会像这样：

class Singleton {
    static _instance;

    static getInstance() {
        if (!this._instance)
            this._instance = new this();

        return this._instance;
    }
}


const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // true