问题描述
似乎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种方法可以防止此行为:
- 为整个画布调用
var onDraw = function() { context.clearRect(0,256,256); context.drawImage(image,256); context.fillText('TEST',20); requestAnimationFrame(onDraw); };
。但是在这种情况下,我不能仅重绘脏矩形。 - 为画布设置
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以触发画布中抗锯齿设置的重置。