Javascript 使用多个图层时，Chrome中的画布图像渲染质量不一致

一个令人沮丧的小渲染问题，我只能在桌面上的Chrome上看到

我有两个画布层，我在不使用任何libs的情况下绘制它们，只是在每个画布上使用drawImage。所以没什么特别的。但我正在尝试不经常在背景画布上绘制背景图像，然后在顶部画布上绘制需要频繁移动的内容。这似乎比每帧在单个画布上绘制背景更有效

问题是。。。。如果我每次都将背景图像绘制到后画布上（底部示例），那么图形看起来平滑且正确。但是如果我只画一次后画布，然后在后续的请求中AnimationFrames只画一次前画布。。。。然后背景图像变为更粗糙的版本（顶部示例）

我完全被这搞糊涂了！在画完后，我没有触摸背面的画布。。。。那么为什么Chrome会改变它的外观呢？所有其他浏览器都会显示非jaggedy top示例，无论我是否经常将其渲染到后画布：/

---

谢谢

作为测试，试着将后画布改为图像，看看是否得到相同的结果（您可以将src设置为

canvas.toDataURL（）

）。您最有可能触发GPU加速合成：它看起来很好。。。。有趣的是，你提到GPU加速；作为我的台式电脑chrome://gpu shows使用硬件加速导致背面画布在未被绘制时出现像素化/锯齿状-但我的笔记本电脑chrome://gpu 显示不使用硬件加速不会受到此问题的影响。