Android 4.2 股票浏览器。画布 clearRect() 有时不起作用答案

【问题标题】：Android 4.2 Stock browser. Canvas clearRect() sometimes doesn't workAndroid 4.2 股票浏览器。画布 clearRect() 有时不起作用
【发布时间】：2018-12-18 12:09:44
【问题描述】：

所以我对 js-canvas-animation 中的 clearRect 有疑问。此问题仅在 Android API 16 上发生，并且仅在动画重新启动时发生。

我在动画中使用setInterval()（这里是简化代码）

function start() {   
    clearInterval(animationInterval);
    x = 0;
    canvas = document.getElementById("animationCanvas");
    ctx = canvas.getContext("2d");
    animationInterval = setInterval(func, 30);
}

function func() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(halfWidth - x, 0, 250, 150);
    x += extensionStep;
}

它看起来像一个海岸。但是每次，当我使用帮助启动功能重新启动动画时，在新动画下我都会看到上一帧的上一帧动画。我已经在尝试beginPath()、save、stroke。我检查了所有关于 SO 的问题，什么也没有。

如何清除动画下的背景？

【问题讨论】：

标签： javascript android canvas webview

【解决方案1】：

所以几个小时后，我找到了一个解决方案。对于旧的 android，这是一个奇怪的错误，因为新的 android（我检查了 api 24）它已修复。对于硬清洁，您可以从 DOM 中分离画布并重新连接：

ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.display = 'none';// Detach from DOM
canvas.offsetHeight; // Force the detach
canvas.style.display = 'inherit'; // Reattach to DOM

操作简单，不占用资源。

【讨论】：