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

Question

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

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

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

Answer 1

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

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

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