<canvas>：从内存中删除 2d 上下文而不从内存中删除 webgl 上下文

Posted 2023-03-24

【中文标题】<canvas>：从内存中删除 2d 上下文而不从内存中删除 webgl 上下文

【英文标题】：<canvas>: Remove the 2d context from memory without removing the webgl context from memory

【发布时间】：2014-11-22 16:41:44

【问题描述】：

我有一个具有 2d 和（重复）webgl 上下文的元素，其纹理与 2d 上下文的像素数据相同。

是否可以在不删除 webgl 上下文的情况下从内存中删除 2d 上下文？

（通过 clearRect 或 fillRect 清除 2d 上下文不会将其从内存中删除） （更改宽度/高度会重置 webgl 和 2d 上下文。）

我现在唯一能想到的就是新建一个canvas，在临时canvas中绘制一个2d context，设置width属性（从而清空原始canvas），然后在原始canvas中基于临时画布 2d 上下文。

【问题讨论】：

为什么要从内存中删除？

我需要减少游戏占用的内存量...

不可能改变绑定到 context2D 的画布的宽度/高度会改变绑定到 webGL 的另一个画布的宽度/高度。答案是将宽度/高度设置为 0

GameAlchemist：是同一张画布。

一个画布只能绑定到一种上下文。一旦绑定，getContext 会为其他未绑定的上下文返回 null。这些是规格，有疑问在这里测试：jsbin.com/divamuvujuzi/1/edit?js,console

【参考方案1】：

2d 上下文和 WebGL 上下文不相关，因此简短的回答是“是的，可以从内存中删除 2d 上下文而不从内存中删除 webgl 上下文”

您不能在 1 个画布上拥有 2 个上下文（目前）。您可以有 2 个上下文，每个上下文来自不同的画布。如果您调用gl.texImage2D(....., some2DCanvas)，它将some2DCanvas 的内容复制到纹理中。它们之间没有任何联系，因为它是一个副本。

另一方面，没有“删除二维上下文”之类的东西。您不能在 javascript 中显式删除上下文。你所能做的就是停止引用它。例如

function() 
  var ctx = document.createElement("canvas").getContext("2d");
();

这将创建一个由变量ctx 引用的上下文。因为该变量是函数的本地变量，所以一旦函数退出，变量就会消失，并且现在没有对上下文的引用，也没有创建它的画布。因此，浏览器可以随时丢弃画布和上下文。何时发生这种情况是未定义的。但是，没有命令会明确地“删除 2d 上下文”。