用javascript创建的文档元素的范围

Scope of document elements created in javascript

本文关键字：元素 范围 文档 创建 javascript      更新时间：2023-09-26

我是javascript和web开发的新手，我正在尝试编写一个渲染器，可以将CT扫描中的每个切片绘制为2D图像。

我有一个由512x97个切片制成的细长（512x49664）图像，每个切片只有512x512个图像。我已经确定这会让webgl感到不安，所以我计划通过在画布上绘制图像并将图像数据复制到纹理中来从图像中获取单个切片。

我的问题是：如果我有一个函数，我可以做一些类似的事情：

// Create a small canvas to contain a single slice.
function getSlice(sliceNumber){
    var sliceCanvas = document.createElement("canvas");
    sliceCanvas.width = 512;
    sliceCanvas.height = 512;
    var sliceContext = sliceCanvas.getContext('2d');
    sliceContext.drawImage(image, 0, 512*sliceNumber, 512, 512, 0, 0, 512, 512);
}

当函数退出时，我创建的画布会发生什么？

它还没有：

  • 添加到DOM
  • 存储在仍在作用域中的变量或属性中
  • 返回任何位置

…已经没有对它的引用了，所以它将被标记为垃圾回收。

通过javascriptDOM API创建DOM元素时，应将此元素附加到页面文档。

否则，此元素将永远不会显示在您的页面中。

所以你必须在你的代码中添加这样一行：

document.body.appendChild(sliceCanvas);

如果您多次调用函数，则应检查画布创建：

var sliceCanvas = document.getElementsByTagName('canvas')[0];

或

var sliceCanvas = document.getElementById('myCanvasId');

然后检查：

if (!sliceCanvas) {
    sliceCanvas = document.createElement('canvas');
    sliceCanvas.id = 'myCanvasId'; // optional
    document.body.appendChild(sliceCanvas);
}
// here your code...

更新：

考虑在要放置画布的位置使用适当的DOM元素来更改document.body。

相关文章：