添加新的画布上下文方法

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

at 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/