Question

所以这是代码：

let unionArray=[];

Object.values(obj).forEach((item)=>{
unionArray=unionArray.concat(item.images)
});

这样可以正常工作但是随着时间的推移，它会在短时间内每999毫秒清除一次画布。有没有办法在前一个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);函数中包含clearRect并仍保持原样工作？

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毫秒调用一次，加上设备处理画布图像需要很长时间。

希望有所帮助：）

在setInterval重复之前清除画布

1 个答案: