添加新的 canvas 上下文方法

Question

我使用以下代码来确保 resetTrasform 方法可用于 canvas。

if (!CanvasRenderingContext2D.prototype.resetTransform) {
    CanvasRenderingContext2D.prototype.resetTransform = function() {
        CanvasRenderingContext2D.prototype.setTransform(1, 0, 0, 1, 0, 0);
    };
}

以前我用

var canvas      = document.getElementById("canvas");
var context     = canvas.getContext("2d");

if (!context.resetTransform) {
    context.resetTransform = function() {
        context.setTransform(1, 0, 0, 1, 0, 0);
    };
}

但这取决于变量context。如果我给它起不同的名字，下面的代码将不起作用，或者我必须修改 if 语句。

无论如何，我想使用原型方法定义另一种方法。我尝试了以下

CanvasRenderingContext2D.prototype.newBlankFrame = function() {
    CanvasRenderingContext2D.prototype.resetTransform();
    CanvasRenderingContext2D.clearRect(0, 0, canvas.width, canvas.height);
};

但它不起作用。它抛出这个错误

Uncaught TypeError: Illegal invocation

在 CanvasRenderingContext2D.prototype.resetTransform();

此外，如果我删除 CanvasRenderingContext2D.prototype.resetTransform(); 并只使用 CanvasRenderingContext2D.clearRect(0, 0, canvas.width, canvas.height);，它仍然会抛出错误：Uncaught TypeError: CanvasRenderingContext2D.clearRect is not a function.

我只想有一个方法可以删除任何转换并清除 canvas。我可以这样做

var canvas      = document.getElementById("canvas");
var context     = canvas.getContext("2d");

context.newBlankFrame = function() {
    context.resetTransform();
    context.clearRect(0, 0, canvas.width, canvas.height);
};

但是，正如我之前所说，这取决于变量名。有没有办法使用原型来完成这项工作？我希望该方法可用于任何 canvas 上下文。

Answer 1

您的两种方法都缺少调用它们的上下文。这可以通过使用 this 关键字来解决，该关键字引用您尝试操作的 canvas 上下文。

if (!CanvasRenderingContext2D.prototype.resetTransform) {
    CanvasRenderingContext2D.prototype.resetTransform = function() {
        this.setTransform(1, 0, 0, 1, 0, 0);
    };
}

CanvasRenderingContext2D.prototype.newBlankFrame = function() {
    this.resetTransform();
    this.clearRect(0, 0, this.canvas.width, this.canvas.height); // canvas of the context
};

这里有一点 fiddle 表明您现在可以在任何上下文中调用这些方法。 http://jsfiddle.net/87ac5j8w/

添加新的 canvas 上下文方法

Add new canvas context method

javascript

prototype

html5-canvas