Javascript 是否可以在没有DOM元素的情况下创建HTML画布？

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

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

---

可能吗？

您可以使用

文档创建一个新的
画布
元素。createElement

：

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

然后从中获取上下文。只需确保设置了

宽度

和

高度

。无需将画布添加到树中即可使其正常工作：

但是你肯定要创建这个节点。您可以为此创建一个函数：

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

---

但这就是我能力的终点。。。您是否可以以某种方式将一个上下文转移到另一个上下文或画布，我不知道…

它已经过时了，但是如何使用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);
}

---

显然，有一个新东西叫做

OffscreenCanvas

，它是专门为这个用例设计的。另外一个好处是，它也适用于网络工作者

您可以在此处阅读规范：

请参见此处的示例：

目前，它仅由Chrome完全支持，并且在Firefox和Opera中的标志后可用，但您始终可以在此处查看受支持浏览器的最新信息：

---

注：谷歌也有专门的指南解释它在网络工作者中的使用：

使用

document.createElement

创建元素很容易。但是，我不知道如果未将

画布添加到DOM（不可见）中，操纵它是否会起作用。在某种程度上，我想要一个上下文，而不是画布，如果这有意义的话（可能没有）。Mmmh。我认为您肯定需要DOM元素，但不必将其添加到DOM中。让我试试看……别惹麻烦，我有空的时候可以自己试试。@Vadzim，请看这个问题，这个问题与你提议的欺骗完全相反。。。还有，你为什么要指出这个可怕的问题？这和我想做的非常相似。这里有一个7.99的问题：哪一个更快：1）多次这样做（如mousemove事件触发的频率），还是2）创建一次屏幕外画布并将其存储为全局变量（仍然没有添加到DOM）？我没有证据，但表面上看，听起来，存储已创建的画布肯定比每帧创建一个新画布便宜得多。这更简单：
c.width=width；c、 高度=高度谢谢，我来看看。让我们希望它的应用超越了铬。