如果 Android (Cordova) 上的尺寸超过 256 像素，画布会闪烁

Posted 2023-03-05

【中文标题】如果 Android (Cordova) 上的尺寸超过 256 像素，画布会闪烁

【英文标题】：Canvas flickers if size is over 256px on Android (Cordova)

【发布时间】：2018-05-04 11:47:12

【问题描述】：

我正在使用 Cordova 和项目 https://github.com/theisensanders-wf/responsive-sketchpad 开发一个着色移动应用程序

一切正常，但如果不是 256 像素或更小，画布会闪烁。我在控制台上进行了一些测试，使用 Sketchpad.resize() 函数更改大小，并且始终超过 256 像素的画布开始闪烁。我将其插入到 document.ready 监听器上，如下所示：

window.pad = new Sketchpad(document.getElementById('canvasDiv'));

我所说的闪烁是指线条似乎具有模糊然后再次渲染的效果，并且该行为每 1 秒重复一次。

我尝试使用 requestAnimationFrame，但这使得刷新率方面的性能非常差。它是一款涂色应用，因此绘画的感觉是实时的，这一点很重要。

【问题讨论】：

平板电脑 android 7.1.1 Chrome 62 我看不到任何闪烁。在代码中，我看不到闪烁的明显原因，但不确定闪烁的含义（背景闪烁、线条闪烁或其他）。我看不到您使用requestAnimationFrame，这将消除许多闪烁的原因。此外，您还为每个 UI 事件重绘所有绘制的内容，这将消耗功率和 UI 采样率迅速下降。建议您将之前的行存储在第二个画布上并仅渲染当前行，这将减少负载并且还可以减少闪烁。但是没有更多关于闪烁意味着什么的信息......

...我没有更多建议了。

@Blindman67 我更新了问题。我在插件的演示站点上看不到闪烁。然而，它发生在科尔多瓦。我会尝试创建一个空白的cordova项目并放在这里。

【参考方案1】：

我不知道它是否仍然有效，但有a plugin to improve canvas speed on android。

唯一的问题是它已经4年没有维护了......