48

画面外でペイントしたり読み取ったりできる HTML キャンバス コンテキストが必要です (この例では、テキストを書き、作成された形状を読み取りますが、これは一般的な質問です)。キャンバスをオフスクリーン フレーム バッファとして使用することもできます。

非表示の DOM 要素を作成できると思いますが、JavaScript から作成したいと思います (実行時に多数のキャンバスを作成および破棄したい場合があります)。

可能？

4

4 に答える 4

59

次の方法で新しいcanvas要素を作成できdocument.createElementます。

var canvas = document.createElement('canvas');

それからコンテキストを取得します。と を必ず設定してwidthくださいheight。キャンバスを機能させるために、ツリーにキャンバスを追加する必要はありません。

デモ

ただし、必ずそのノードを作成する必要があります。ただし、そのための関数を作成できます。

function createContext(width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas.getContext("2d");
}

しかし、それが私の能力の終わりです...どうにかしてコンテキストを別のコンテキストまたはキャンバスに転送できるかどうかはわかりません...

于 2011-07-07T10:17:40.990 に答える
6

OffscreenCanvasこのユースケースのために意図的に設計された、と呼ばれる新しいものがあるようです。追加のボーナスは、Web Workers でも機能することです。

ここで仕様を読むことができます: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface

ここで例を参照してください: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

現在、Chrome でのみ完全にサポートされており、Firefox と Opera のフラグの背後で利用できますが、サポートされているブラウザーに関する最新情報は、https ://caniuse.com/#feat=offscreencanvas でいつでも確認できます。

追伸: Google には、Web ワーカーでの使用を説明する専用のガイドもあります: https://developers.google.com/web/updates/2018/08/offscreen-canvas

于 2019-02-18T15:16:33.237 に答える