Question

我一般都是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);
}

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

Answer 1

它还没有：

添加到DOM
存储在仍在范围内的变量或属性
随时随地返回

...没有任何引用，因此它将被标记为垃圾收集。

Answer 2

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

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

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

document.body.appendChild(sliceCanvas);

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

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。

在javascript

2 个答案: