HTML5画布在Google Chrome中闪烁

如何解决HTML5画布在Google Chrome中闪烁

似乎Google chrome上的更新弄乱了我的画布渲染。 我有一个非常简单的代码，可以在画布上呈现图像和文本：

<?relevance
(html it) of concatenations of ( "%22" &
  name of computer of it & "%22|%22" &
name of issuer of action of it & "%22|%22" &
name of action of it & "%22|%22" &
status of it as string & "%22|%22" &
state of action of it & "%22%0d%0a"
)
of results of bes actions whose (name of it starts with "Config_item")
?>

此代码在Chrome https://jsfiddle.net/gp9jxn6q/上非常闪烁（只需将鼠标移到页面上即可）。

只有2种方法可以防止此行为：

1. 为整个画布调用var onDraw = function() { context.clearRect(0,256,256); context.drawImage(image,256); context.fillText('TEST',20); requestAnimationFrame(onDraw); }; 。但是在这种情况下，我不能仅重绘脏矩形。
2. 为画布设置context.clearRect()。在这种情况下，所有字体看起来都很糟糕。

还有什么可以做的？

解决方法

从Chromium版本83开始，这个错误开始更加频繁地出现，而从85开始，这个错误就更加频繁了（因此，除了Chrome之外，这还会影响Opera和新的Edge）。 几个月前，我在Chromium提出了一个问题，他们目前正在努力解决： https://bugs.chromium.org/p/chromium/issues/detail?id=1092080

发生的情况是，在调用drawImage（）之后的下一个监视器帧中，将抗锯齿设置为“最近邻”。这可能会影响源元素和目标元素，并且会影响任何CanvasImageSource（图像，视频，画布：https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource）。

它是随机发生的，因为它可能与设备的性能和时序有关，因为某些图形设置可以修复该错误，同时又可以在另一台设备上创建该错误。

但是我也有一些好消息。我想我终于找到了一种解决方法，可以在调用drawImage（）来重置抗锯齿之后执行：http://jsfiddle.net/u7k5qz2p/

    <div class="chromium-issue-1092080-workaround__wrapper">
        <canvas id="canvas" width="300" height="300"></canvas>
        <div class="chromium-issue-1092080-workaround__overlay"></div>
    </div>

    context.drawImage(image,256,256);
    chromiumIssue1092080WorkaroundOverlay.style.transform = `scaleX(${Math.random()})`

它的作用是在画布上覆盖一个div。并且在每次drawImage（）调用更改了转换样式后的scaleX以触发画布中抗锯齿设置的重置。