Question

我发现canvas + javascript在使用requestAnimationFrame（）时默默地丢帧（在Chrome版本53.0.2785.116（64位）上测试）。最令人惊讶的是，即使没有显示帧，getImageData也会显示正确的颜色值。

以下代码应每六十帧显示一次白色闪光，或者对于60Hz显示器应显示一秒。但有时候，控制台会显示“闪光灯”。即使没有显示白色闪光。有关正在发生的事情以及如何检测框架是否下降的任何想法？

var canvas=document.getElementById("flicker")
var context = canvas.getContext("2d")

canvas.width  = window.innerWidth
canvas.height = window.innerHeight

let i = 0
let displayFlash = false

// once per second
function renderLoop() {
    if (i%60 == 0) {
        console.log("flash")
        displayFlash = true
        context.fillStyle = "white"
    } else if (displayFlash) {
    // try to verify frame was displayed
        if (context.getImageData(1,1,1,1).data[0]===255) {
        displayFlash = false
        context.fillStyle = "black"
        }  else {
        context.fillStyle = "white"
      }

    } else {
        context.fillStyle = "black"
    }
    context.fillRect(0, 0, canvas.width, canvas.height);       
    i++
    requestAnimationFrame(renderLoop)
}

renderLoop()

https://jsfiddle.net/tbenst/gdbsb564/5

编辑：修复jsfiddle链接

HTML Canvas静默删除帧（requestAnimationFrame）

0 个答案: