15

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

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

我将在其中创建一个包含所有正常 2d 属性的 othercontext，以及更多属性。有没有办法做到这一点？

4

4 回答 4

10

您不能完全做到这一点，但您可以挂钩该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()将调用drawSmileyFace已添加到 的普通二维上下文返回值的getContext("2d")。

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

  • 您的上下文名称稍后可能会被浏览器本地实现，并且您的覆盖getContext将阻止该上下文类型可访问
  • 更一般地说，扩展宿主对象（如 DOM 元素）的功能通常是不好的做法，因为宿主对象可以（但通常不会）在完全普通的操作（如属性访问）上抛出错误
于 2013-05-20T17:10:22.017 回答
0

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

于 2013-05-17T13:14:01.957 回答
0

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

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

除了"2d"and之外"webgl"，canvas 规范声明浏览器供应商可以定义他们自己的（实验性）上下文（如“moz-3d”），但同样不能定义 JavaScript 作者。

坚持在现有上下文中添加新方法。（或制作包装纸等）

于 2013-05-20T16:12:15.237 回答
0

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

于 2013-05-19T16:40:40.947 回答