Javascript 是否可以创建没有 DOM 元素的 HTML 画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6608996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to create an HTML canvas without a DOM element?
提问by Joe
I'd like to have an HTML canvas context that I can paint to and read off-screen (in this example, writing text and reading the shape that is created, but it's a general question). I may also want to use a canvas as an off-screen frame-buffer.
我想要一个 HTML 画布上下文，我可以在屏幕外绘制和读取它（在此示例中，编写文本并读取创建的形状，但这是一个普遍问题）。我可能还想使用画布作为离屏帧缓冲区。
I suppose I could create a hidden DOM element but I'd rather create it from JavaScript (I may want to create and destroy a number of canvas at runtime).
我想我可以创建一个隐藏的 DOM 元素，但我更愿意从 JavaScript 创建它（我可能想在运行时创建和销毁一些画布）。
Possible?
可能的？
回答by Felix Kling
You can create a new canvaselement with document.createElement:
您可以使用以下命令创建新canvas元素document.createElement：
var canvas = document.createElement('canvas');
and then get the context from it. Just make sure you set the widthand height. You don't have to add the canvas to the tree in order to make it work:
然后从中获取上下文。只要确保你设置了width和height。您不必将画布添加到树中才能使其工作：
But you definitely have to create that node. You could create a function for that though:
但是您绝对必须创建该节点。不过，您可以为此创建一个函数：
function createContext(width, height) {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
return canvas.getContext("2d");
}
But that is where my competency ends... whether you can somehow transfer a context to another context or canvas, I don't know...
但这就是我的能力结束的地方......你是否可以以某种方式将上下文转移到另一个上下文或画布，我不知道......
回答by Dave
Its old but what about saving one canvas with toDataURL and copying to the other with drawImage. you could also use save and restore to make a frame buffer
它很旧，但是如何使用 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);
}
回答by Isti115
There is apparently a new thing called OffscreenCanvasthat was deliberately designed for this use case. An additional bonus is that it also works in Web Workers.
显然有一种新东西叫做OffscreenCanvas专为这个用例设计的。一个额外的好处是它也适用于 Web Workers。
You can read the specifications here: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface
您可以在此处阅读规范：https: //html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface
And see examples here: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
并在此处查看示例：https: //developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
Currently it is only fully supported by Chrome and is available behind flags in Firefox and Opera, but you can always check for the latest information on supported browsers here: https://caniuse.com/#feat=offscreencanvas
目前，它仅受 Chrome 完全支持，并且在 Firefox 和 Opera 的标志后面可用，但您可以随时在此处查看有关受支持浏览器的最新信息：https: //caniuse.com/#feat=offscreencanvas
ps.: Google also has a dedicated guide explaining it's use in Web Workers: https://developers.google.com/web/updates/2018/08/offscreen-canvas
ps：谷歌也有专门的指南解释它在网络工作者中的使用：https: //developers.google.com/web/updates/2018/08/offscreen-canvas
