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

Question

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

我有一个canvas元素，它有getContext方法，但它返回null。检查电位的简短列表:

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

Answer 1

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

对于我来说，我正在生成许多独立的画布并分别管理它们的2d上下文。问题是我没有注意到垃圾收集，我花了很长时间才注意到它，因为我在Chrome中测试了大部分内容，其中一切都很好。
同时，在火狐浏览器的行为是，我的项目变得完全无响应，没有抛出有意义的错误，在Safari我可以得到我的上下文很好，直到我跑完总内存分配到画布，然后getContext('2d')将返回null。

我的第一个解决方案是降低我的画布的分辨率，但更好的解决方案是处理那些我目前没有使用并在飞行中生成它们。

Answer 2

我也遇到了同样的问题。我不知道为什么它会发生，即使我搜索了很多，但我尝试了两件事，他们解决了我的问题:

1. 获取类型的背景下你的画布在html中使用标签后的元素。即使您不会使用它，也只是用于初始化。我知道这是非常丑陋和糟糕的，非结构化的代码，但它只是一个解决方案:(

   var canvas = document.getElementById('canvas');

   canvas.getContext (2 d);

2. 使用js动态创建画布并获取上下文:

   var newCanvas = document.createElement('canvas');

   newCanvas。Id = 'canv';

   canvasContainer.appendChild(newCanvas);
   var c = newCanvas.getContext('2d'); // whatever type of context