Question

所以我在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的问题，一无所获。

我如何清除动画下的背景？

Answer 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

操作简单，不占用资源。

Android 4.2库存浏览器。画布clearRect（）有时不起作用

1 个答案: