Is it possible to create an HTML canvas without a DOM element?(是否可以创建没有 DOM 元素的 HTML 画布?)
问题描述
我想要一个 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...
这篇关于是否可以创建没有 DOM 元素的 HTML 画布?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:是否可以创建没有 DOM 元素的 HTML 画布?
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01