web-dev-qa-db-ja.com

DOM要素なしでHTMLキャンバスを作成することは可能ですか？

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

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

可能？

javascripthtml5html5-canvas
41
Joe

document.createElementで新しいcanvas要素を作成できます：

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

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

[〜＃〜] demo [〜＃〜]

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

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

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

47
Felix Kling

古いが、1つのキャンバスをtoDataURLで保存し、もう1つのキャンバスをdrawImageでコピーすることはどうでしょう。保存と復元を使用してフレームバッファを作成することもできます

    function createCanvas(width, height) {
    var c = document.createElement('canvas');
    c.setAttribute('width', width);
    c.setAttribute('height', height);
    return c;
}

function canvasImg(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.fillRect(0,0,canvas.width, canvas.height);
    var img = canvas.toDataURL('image/png');

    return img;
}

function placeImage(canvas, img) {
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0,0);
}

window.onload = function(){
    var canvas = createCanvas(400, 400);
    var hiddenCanvas = createCanvas(400,400);
    var i = canvasImg(hiddenCanvas);
    var img = new Image();
    img.src = i;
    placeImage(canvas, img);
    document.body.appendChild(canvas);
}
7
Dave

この使用例のために意図的に設計された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には、ウェブワーカーでの使用を説明する専用のガイドもあります。 https://developers.google.com/web/updates/2018/08/offscreen-canvas

2
Isti115