48

我想要一个 HTML 画布上下文，我可以在屏幕外绘制和阅读（在这个例子中，写文本和阅读创建的形状，但这是一个普遍的问题）。我可能还想使用画布作为屏幕外帧缓冲区。

我想我可以创建一个隐藏的 DOM 元素，但我宁愿从 JavaScript 创建它（我可能想在运行时创建和销毁一些画布）。

可能的？

4

4 回答 4

59

您可以使用以下命令创建新canvas元素document.createElement：

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

然后从中获取上下文。只要确保你设置了widthand 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 回答
8

它很旧，但是如何使用 toDataURL 保存一个画布并使用 drawImage 复制到另一个画布。您还可以使用 save 和 restore 来制作帧缓冲区

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);
}
于 2013-08-16T18:44:36.673 回答
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

ps.：Google 也有专门的指南解释它在 Web Workers 中的使用：https ://developers.google.com/web/updates/2018/08/offscreen-canvas

于 2019-02-18T15:16:33.237 回答
0

CanvasRenderingContext2D 和 WebGLRenderingContext 类都有与它们关联的画布元素作为属性canvas；而且，像往常一样，当您的代码在运行时不再引用它们时，上下文实例及其画布都将被垃圾收集。

你可以使用这个函数来创建一个新的上下文

function newContext({width, height}, contextType = '2d') {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas.getContext(contextType);
}

const ctx = newContext({width: 100, height: 100});
console.log(ctx.canvas.width == 100) // true

通过使用取消引用，您可以轻松地创建 DOM 画布的克隆以进行帧缓冲，如下所示：

const domCanvas = document.getElementById('myCanvas');

const frameBuffer = newContext(domCanvas);
frameBuffer.drawImage(domCanvas, 0, 0);

这将创建一个与传入的画布元素具有相同宽度和高度的上下文。您可以根据需要扩展该函数。

于 2022-01-09T00:56:58.283 回答