JavaScript でライブラリを作成していますが、2D ではなくキャンバスに新しいタイプのコンテキストを追加する方法があるかどうかを知りたいと思っていました。
var ctx.document.getElementById('canvas').getContext("othercontext");
ここで、通常のすべての 2d プロパティに加えて、その他のコンテキストを作成します。これを行う方法はありますか?
JavaScript でライブラリを作成していますが、2D ではなくキャンバスに新しいタイプのコンテキストを追加する方法があるかどうかを知りたいと思っていました。
var ctx.document.getElementById('canvas').getContext("othercontext");
ここで、通常のすべての 2d プロパティに加えて、その他のコンテキストを作成します。これを行う方法はありますか?
これを正確に行うことはできませんが、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
と、 の通常の 2D コンテキストの戻り値に追加された が呼び出されますgetContext("2d")
。
ただし、実際にデプロイされたコードでこのパターンを使用することを提案するのをためらっています。理由は次のとおりです。
getContext
とそのコンテキスト タイプにアクセスできなくなりますこれは不可能だと確信しています。オブジェクトでラップするか、コンテキストにメソッドを追加することをお勧めします
簡単な答えはノーです。それは不可能です。
Canvas コンテキストは、ブラウザ ベンダー (Chrome、Firefox など) が作成することを意図しており、JavaScript/Canvas の作成者 (あなたと私) が作成するものではありません。
"2d"
とは別として"webgl"
、キャンバスの仕様では、ブラウザー ベンダーが独自の (実験的な) コンテキスト ("moz-3d" など) を定義できると述べていますが、JavaScript の作成者はそうではありません。
既存のコンテキストに新しいメソッドを追加することに固執します。(またはラッパーを作るなど)