javascript - 在 setInterval 重复之前清除 Canvas

Question

所以这是代码:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RectCount = 0;
ctx.strokeStyle = "white";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, c.width, c.height);
setInterval(function () {
    for (RectCount = 0; RectCount < 2000; RectCount += 1) {
        var x = 2000 * Math.random(),
            y = 2000 * Math.random();
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.arc(x, y, 1, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
    }
}, 1000);
setInterval(function () {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, c.width, c.height);
}, 999);

这工作得很好，但随着时间的推移，它每 999 毫秒清理一次 Canvas 的事实很快就会变得明显。有什么方法可以将 clearRect 包含在之前的 setInterval 函数中，并且仍然保持其正常工作吗？

Answer 1

您可以通过使用 requestAnimationFrame() 来实现此效果而不是这里的两个 setInterval() 函数 - 随着时间的推移，这两个函数明显会失相。

基本原理是这样的......

/* window.requestAnimationFrame
   simple cross-browser with fallback */
var RAF = (function(callback) {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
}());

// drawing function
function loop() {
    /* clear canvas or fillRect entire area */
    /* paint new stuff to canvas */
    RAF(loop);
}

// call drawing function for first time
loop();

循环函数现在一遍又一遍地调用自身。由于 RAF() 只是一个与屏幕刷新率同步的计时函数，因此添加 window.setTimeout()方法到循环来控制时序，就像这样......

var time = 999;

function loop() {
    /* clear canvas or fillRect entire area */
    /* paint new stuff to canvas */
    setTimeout(function() {
        RAF(loop);
    }, time);
}

这里，loop() 函数将每 999 毫秒调用一次自身，加上设备处理 Canvas 图像所需的时间。

希望有帮助:)