html - getContext ('2d' ) 在 Safari 10 中返回 null

Question

即使在我们的 MacBook 上我也无法重现问题本身，但我们有一些用户日志。问题是当我尝试在 CanvasRenderingContext2D 上使用一些渲染方法时它崩溃了，因为它是空的。

所以我有 canvas 元素，它有 getContext 方法，但它返回 null。检查潜力的简短列表:

1. canvas 元素已创建，存在，具有正大小并且有getContext方法
2. 页面加载后执行的 getContext 调用(加载监听器)
3. 没有其他的 getContext 调用其他参数(例如'webGl')
4. 在 getContext('2d') 中 '2d' 字符串总是小写
5. 此问题仅在 Safari 10 上重现
6. 在某些情况下，这个错误不是在页面加载之后发生的，而是 在一些用户操作之后。这意味着 Canvas 被破坏了 重新创建了几次，并且有效。

Answer 1

我不确定确定这是否与此处描述的情况相关，但我遇到过类似的情况并且我能够解决。也许这对某人有帮助。问题的要点是浏览器处理 HTML5 Canvas 的方式完全不同。特别是，他们愿意分配给整个 Canvas 和单个 Canvas (对高度、宽度和面积的限制)的内存量似乎有所不同。我从来没有费心去了解细节，但这是一个 stack question解决一些限制

对我来说，我正在生成许多独立的 Canvas 并分别管理它们的 2d 上下文。问题是我对垃圾收集不小心，我花了很长时间才注意到它，因为我在 Chrome 中进行了大部分测试，一切正常。
与此同时，firefox 中的行为是我的项目变得完全没有响应而没有抛出有意义的错误，而在 Safari 中我可以使我的上下文正常，直到我用完分配给 Canvas 的总内存，然后 getContext('2d') 将返回 null。

我的第一个解决方案是降低 Canvas 的分辨率，但更好的解决方案是处理我当前未使用的 Canvas 并即时生成它们。