Question

我使用以下代码确保画布可以使用resetTrasform方法。

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。

我只想要一个方法来删除任何变换并清除画布。我可以这样做

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

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

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

Answer 1

您的方法都缺少必须调用它们的上下文。这可以通过使用this关键字来修复，该关键字引用您尝试操作的画布上下文。

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
};

这是一个小小的小提示，表明你现在可以在任何上下文中调用方法。 http://jsfiddle.net/87ac5j8w/

添加新的画布上下文方法

1 个答案: