添加新的畫布上下文方法

我使用以下代碼來確保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); 
};

但是，正如我之前所說，這取決於變量名稱。有沒有辦法使用原型來完成這項工作？我希望該方法可用於任何畫布上下文。

來源

2015-07-20 akinuri

請注意，添加到API的原型可能會導致*非常難以找到*錯誤。例如，你的'.resetTransform'已經是Chrome中的CanvasRenderingContext2D API的一部分，你可以用你自己的.resetTransform來覆蓋它。 – markE

您的兩個方法都缺少必須調用的上下文。這可以通過使用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/

來源

2015-07-20 20:21:19

Derp。哈哈。應該想出了這個。謝謝。 – akinuri

添加新的畫布上下文方法

回答

相關問題