锁屏后，Canvas 元素在 Chrome 中不可见答案

【问题标题】：Canvas element is invisible in Chrome after lockscreen锁屏后，Canvas 元素在 Chrome 中不可见
【发布时间】：2016-04-07 15:39:41
【问题描述】：

使用 CreateJS 库开发 Canvas 手机游戏。除了这个问题，一切都很顺利：

当我通过主页按钮或锁定手机退出浏览器时，在锁定屏幕或重新启动浏览器后，Canvas 元素不可见。刷新解决了问题。

我尝试了 chrome 元素检查器，正如您在屏幕截图中看到的那样，元素存在并且它位于正确的位置。我不知道为什么它是看不见的。

有什么想法吗？

【问题讨论】：

可能您的画布已调整大小，或者其父级之一的 innerHTML 已被编辑。
我有一个功能，可以根据窗口大小调整画布大小 - 优化画布位置。但这只会影响画布宽度/高度和顶部/左侧属性。正如您在屏幕上看到的，画布元素的位置是正确的。这让我感觉它的透明度属性设置为 0。但事实并非如此。为什么会发生这种情况，您还有其他变体吗？
如果你用它的width和height属性调整画布的大小，那么画布和它的所有上下文属性将被清除，你将不得不重绘所有东西。如果您确实使用 css 调整大小，那很糟糕，但这是画布被清除的错误。
我确实使用width 和height 属性调整大小，并且我的舞台在每个requestAnimationFrame 滴答声上都会更新。也许股票在锁定屏幕上死了，然后没有刷新就不会复活？
您是否尝试过在 DOM 上添加焦点事件侦听器来指示画布重绘（stage.update）？可能值得一试。

【解决方案1】：

如果您抓取像素，您会发现它实际上仍然存在。这可能是 Chrome 49/50 中的一个错误（我正在尝试找到一个可接受的解决方法）。

如果您将画布宽度更改为 0，然后再恢复到正确的大小，或者旋转您的设备几次再次可见。

这似乎是硬件加速的一些休眠问题：/

【讨论】：

看来你给了我最好的解释:)
没问题 - 如果我找到可行的解决方案，我会在此处发布。目前，我监听一个 tab-switch 事件，抓取 DOM 中的所有画布，抓取 size + resize 到 0 并返回。在一些测试中，我们还抓取像素，调整大小，然后重新绘制内容这意味着每个绘制周期都必须重新获取上下文并重新应用任何变换。这对我来说并不理想，因为我目前想用一个“修复”来修补大约 100 个游戏。糟糕的时期:)