15

JavaScript でライブラリを作成していますが、2D ではなくキャンバスに新しいタイプのコンテキストを追加する方法があるかどうかを知りたいと思っていました。

var ctx.document.getElementById('canvas').getContext("othercontext");

ここで、通常のすべての 2d プロパティに加えて、その他のコンテキストを作成します。これを行う方法はありますか？

4

4 に答える 4

10

これを正確に行うことはできませんが、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")。

ただし、実際にデプロイされたコードでこのパターンを使用することを提案するのをためらっています。理由は次のとおりです。

于 2013-05-20T17:10:22.017 に答える
0

これは不可能だと確信しています。オブジェクトでラップするか、コンテキストにメソッドを追加することをお勧めします

于 2013-05-19T16:40:40.947 に答える
0

簡単な答えはノーです。それは不可能です。

Canvas コンテキストは、ブラウザ ベンダー (Chrome、Firefox など) が作成することを意図しており、JavaScript/Canvas の作成者 (あなたと私) が作成するものではありません。

"2d"とは別として"webgl"、キャンバスの仕様では、ブラウザー ベンダーが独自の (実験的な) コンテキスト ("moz-3d" など) を定義できると述べていますが、JavaScript の作成者はそうではありません。

既存のコンテキストに新しいメソッドを追加することに固執します。（またはラッパーを作るなど）

于 2013-05-20T16:12:15.237 に答える