Question

我正在用javascript创建一个库，我想知道是否有某种方法可以在画布中添加新类型的上下文而不是2d

var ctx.document.getElementById('canvas').getContext("othercontext");

我将创建一个包含所有普通2d属性的othercontext，还有更多。有没有办法做到这一点？

Answer 1

您无法完全执行此操作，但您可以挂钩getContext方法并返回具有额外属性和方法的扩展2D上下文：

(function() {
    // save the old getContext function
    var oldGetContext = HTMLCanvasElement.prototype.getContext;

    // overwrite getContext with our new function
    HTMLCanvasElement.prototype.getContext = function(name) {
        // if the canvas type requested is "othercontext",
        // augment the 2d canvas before returning it
        if(name === "othercontext") {
            var plainContext = oldGetContext.call(this, "2d");
            return augment2dContext(plainContext);
        } else {
            // get the original result of getContext
            return oldGetContext.apply(this, arguments);
        }
    }

    // add methods to the context object
    function augment2dContext(inputContext) {
        inputContext.drawSmileyFace = function() { /* ... */ };
        inputContext.drawRandomLine = function() { /* ... */ };
        inputContext.eraseStuff = function() { /* ... */ };
        return inputContext;
    }
})();

因此，对someCanvas.getContext("othercontext").drawSmileyFace()的调用将调用已添加到普通2D上下文返回值drawSmileyFace的{{1}}。

但是，我犹豫是否建议在实际部署的代码中使用此模式，因为：

您的上下文名称可能稍后由浏览器本机实现，而您覆盖getContext("2d")将阻止该上下文类型被访问
更一般地说，它通常是bad practice to extend functionality of host objects，就像DOM元素一样，因为主机对象可以（但通常不会）在完全普通的操作（例如属性访问）上抛出错误

Answer 2

虽然我无法挖掘出明确回答你问题的任何内容，但我会暂时说明，你在任何Javascript实现中都不可能定义一个新的上下文（即使你可以，浏览器可能暂时不支持它。但是，您可以使用其他属性修改已存在的“2d”上下文，也许可以通过构造函数运行它们？

Answer 3

我很确定这是不可能的。我建议将它包装在一个对象中或将方法添加到上下文

Answer 4

简单的答案是否定的，这是不可能的。

Canvas上下文旨在成为浏览器供应商（Chrome，Firefox等）创建的内容，而不是JavaScript / Canvas作者（您和我）。

除"2d"和"webgl"之外，画布规范指出浏览器供应商可能会定义自己的（实验性）上下文（如“moz-3d”），但同样不是JavaScript作者。

坚持在现有环境中添加新方法。（或制作包装等）

向画布对象添加新上下文

4 个答案: