使图像闪烁的最快方法 --> 快到你没看到它

Question

我正在寻找一种方法让图像闪烁得如此之快以至于我看不到它（然后避免一些截图）：

    var img = document.getElementsByTagName('img')[0];
    var i = true;

    setInterval(blink,10);
    
    function blink(){
        if(i){
            img.style.visibility="visible";
            i=false;
        }else{
            img.style.visibility="hidden";
            i=true;
        }
        
    }

但我仍然看到闪烁，我认为我不能低于 10ms。我一开始以为低于24 f/s我不会注意到它，但似乎并非如此。

我可以做些什么来让它更快？有可能吗？

最终目标是避免屏幕拍摄。

Answer 1

监视器的标准刷新率为 60Hz - 每秒 60 次。这是一个 硬件限制 - 即使有完美的软件时序，也没有办法比这更频繁地显示帧 - 并且注意屏幕的人可以很容易地看到出现 1/60 的东西一秒钟。

你唯一的选择是让图像随每一帧出现和消失（这比 setInterval 和 requestAnimationFrame 更精确 - 但它仍然会被密切观看的人看到).

// Ensure browser is not busy
setTimeout(() => {
  window.requestAnimationFrame(() => {
    document.body.classList.toggle('blue');
    window.requestAnimationFrame(() => {
      document.body.classList.toggle('blue');
    });
  });
}, 1000);

.blue {
  background-color: blue;
}

显示器不可能在足够短的时间内显示一些东西，以至于无法察觉。

Answer 2

我能想到的最快的解决方案是 CSS animate the opacity property. The opacity property is animated on the GPU. This means less load on the CPU and the mainthread.

#box {
width: 100px;
height: 100px;
position: relative;
background: red;
animation: 1ms steps(2, jump-none) 0s infinite running blink;

}

@keyframes blink {
  from { opacity: 0; }
  to   { opacity: 1; }
}

<div id="box">Secret Image</div>

使图像闪烁的最快方法 --> 快到你没看到它

Fastest way to make image blink --> so fast that you didn't see it

javascript

image

blink