是否可以创建没有 DOM 元素的 HTML 画布?

2022-01-17 00:00:00 javascript html html5-canvas

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

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.

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

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).

可能吗?

推荐答案

您可以使用 document.createElement 创建一个新的 canvas 元素:

You can create a new canvas element with document.createElement:

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

然后从中获取上下文.只需确保设置了 width 和 height.您不必将画布添加到树中即可使其工作:

and then get the context from it. Just make sure you set the width and height. You don't have to add the canvas to the tree in order to make it work:

演示

但您肯定必须创建该节点.不过，您可以为此创建一个函数:

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...

相关文章