V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
rabbbit
V2EX  ›  问与答

有可能利用视觉残留,不断的刷新 canvas 来显示一张图片吗?

  •  
  •   rabbbit · 2018-09-19 07:33:10 +08:00 · 4099 次点击
    这是一个创建于 2238 天前的主题,其中的信息可能已经有所发展或是发生改变。

    把图片分成两半交替显示, 图像会闪动.

    预览 https://aaron-bird.github.io/CanvasDemo/

    代码 https://github.com/Aaron-Bird/CanvasDemo/blob/master/index.html

    想问下为啥会闪? requestAnimationFrame 每秒绘制 60 帧,人眼不是 24 帧就够了吗?

    第 1 条附言  ·  2018-09-19 08:12:07 +08:00
    第 2 条附言  ·  2018-09-19 11:50:41 +08:00
    第 3 条附言  ·  2018-09-19 22:46:47 +08:00
    好像没说清楚,我想模拟用 js 限制截图里 26 提到的那个办法.目前看来只有模拟隔行扫描才不会闪的那么严重,不过图像质量也变差了,没什么实用价值. 这种方法现阶段不太可行,也许等到显示器的刷新频率普遍提高 120/240 后会有用吧.
    36 条回复    2018-09-19 17:46:51 +08:00
    GiantHard
        1
    GiantHard  
       2018-09-19 07:46:01 +08:00 via Android
    我的猜测,多分几份,前后两帧之间最好有重叠部分,这样看起来会好一些。
    wjm2038
        2
    wjm2038  
       2018-09-19 08:01:23 +08:00 via Android
    可能就刚好在没绘制的时候看到了背景吧。。也有可能是没有真正的 60 帧?
    zhyl
        3
    zhyl  
       2018-09-19 08:04:29 +08:00 via Android   ❤️ 1
    因为你不断 clearrect 整个画布
    lmmortal
        4
    lmmortal  
       2018-09-19 08:04:31 +08:00
    把页面背景调黑试试?
    oxoxoxox
        5
    oxoxoxox  
       2018-09-19 08:05:25 +08:00 via Android
    你是正常图片和白色背景交替?
    你换成黑色背景再试试看呢
    Trim21
        6
    Trim21  
       2018-09-19 08:06:04 +08:00 via Android   ❤️ 4
    24 帧的帧和帧之间也没有显示一次白色的背景啊…
    Cyron
        7
    Cyron  
       2018-09-19 08:15:24 +08:00 via iPhone   ❤️ 1
    视频里添加一帧图片也可以明显看出来的,原理相同
    Cyron
        8
    Cyron  
       2018-09-19 08:17:13 +08:00 via iPhone
    6 楼说的对,你这是相当于图片和背景交替每张 30 帧
    zhs227
        9
    zhs227  
       2018-09-19 08:18:21 +08:00
    尝试了每个 rafj 里 hidden,下一个 raf 打开。也是一样闪。
    cjpjxjx
        10
    cjpjxjx  
       2018-09-19 08:30:23 +08:00 via Android   ❤️ 1
    个人猜测:电影 24 帧,每一帧都和前一帧相差不大,通过视觉残留就成了视频,在这个过程中并不会显示背景,然而这个图片虽然 60 帧,但确是图片和背景交替显示,图片有视觉残留,然而背景也会有视觉残留,不管是什么颜色
    SimonTart
        11
    SimonTart  
       2018-09-19 08:33:47 +08:00   ❤️ 1
    whileFalse
        12
    whileFalse  
       2018-09-19 08:34:17 +08:00 via iPhone   ❤️ 1
    你怎知胶片电影不闪呢?
    电影院里 帧率 24,每帧时长 1/24,不闪
    你的,帧率 30,每帧 1/60,闪
    胶片电影,帧率 24,每帧时长<1/24,但注意,电影是要在夜里,用很高的亮度投射出来的,人的视野里只有电影。物体越亮,视觉暂留越久。如果你有 AMOLED 屏幕的手机,可以试试全屏后躲在被窝里看,效果会好一些。
    oyhw92
        13
    oyhw92  
       2018-09-19 08:58:51 +08:00 via iPhone
    背景放一张高斯模糊过的图片试试
    kerr92
        14
    kerr92  
       2018-09-19 09:06:04 +08:00   ❤️ 3
    ```js
    canvasCtx.clearRect(0, 0, width, height);
    canvasCtx.drawImage(...arr[i]);
    ```

    理论上闪烁的原因在于你每次画新帧的时候都把前一帧清空了,如果基于 canvas 做动画,应该是直接用新帧覆盖前一帧,而不是清空重画。
    460881773
        15
    460881773  
       2018-09-19 09:18:04 +08:00
    楼上说的有道理
    koalli
        16
    koalli  
       2018-09-19 09:49:33 +08:00   ❤️ 1
    视觉残留是第一帧和第二帧比较相似的时候直接切换才会视觉残留,你这样等于第一帧是图,第二帧是清空的,无法视觉残留...
    Gimini
        17
    Gimini  
       2018-09-19 10:14:15 +08:00   ❤️ 1
    实际上就是你背景和图片交替,各自 30 帧,视觉残留了图像也残留了背景
    wangjie
        18
    wangjie  
       2018-09-19 10:46:48 +08:00
    盯着看一会儿后关掉那个页面看屏幕的那个地方还是在闪
    cent777
        19
    cent777  
       2018-09-19 10:54:55 +08:00
    @oyhw92 放高斯模糊出现了以前非主流头像的效果。。。

    http://cloth.yxxurl.com/testpics/
    KevZhi
        20
    KevZhi  
       2018-09-19 11:08:07 +08:00 via iPhone   ❤️ 1
    人眼能感知到的闪烁频率 48HZ,初期模拟电视为了避免闪烁采用了隔行扫描,25p 的画面分成了 50i,所以不应该用 24hz,应该两倍或更高。
    请参阅《现代电视技术》等基础课程
    KevZhi
        21
    KevZhi  
       2018-09-19 11:09:27 +08:00 via iPhone
    24hz 只是人眼能识别为连贯画面而不是单独画面的阈值,不感知到闪烁需要 48hz
    also24
        22
    also24  
       2018-09-19 11:25:59 +08:00   ❤️ 1
    为什么要闪原图,应该闪水印啊
    一张水印在上,一张水印在下
    also24
        23
    also24  
       2018-09-19 11:29:37 +08:00
    补充,上下水印的话刷新频率可能不够,应该把图片切成几百份,然后随机选择 2~3 份出现水印,并逐个更换。

    只需要保证水印在人眼中不出现视觉残留就行了。
    huawuya
        24
    huawuya  
       2018-09-19 12:30:37 +08:00   ❤️ 1
    闪恰恰是因为视觉残留,因为你每次把整个 canvas 都清空,然后画半张图,另外半截就是白色,图像有视觉残留,白底色同样会有视觉残留,所以看起来就是闪的,如果每次只清除要画的半张图的位置(如下面代码),就不会闪了,

    canvasCtx.clearRect(0, i==0?0:img.height/2, width, img.height/2);
    canvasCtx.drawImage(...arr[i]);
    noe132
        25
    noe132  
       2018-09-19 12:35:03 +08:00
    连 pwm 背光几百 hz 的闪烁都有人觉得看了伤眼,你这个去取 60hz 肯定很明显。
    w88975
        26
    w88975  
       2018-09-19 13:41:01 +08:00 via iPhone
    这样交替显示有啥好处呢
    zhzer
        27
    zhzer  
       2018-09-19 13:47:09 +08:00 via Android
    因为电脑 cpu gpu 还要加工一道
    CSGO
        28
    CSGO  
       2018-09-19 14:35:15 +08:00
    你这个在我 240hz 的显示器上看还行啊。
    cs8425
        29
    cs8425  
       2018-09-19 15:06:34 +08:00
    https://aaron-bird.github.io/CanvasDemo/tel.html
    这个还是闪
    这行
    canvasCtx.clearRect(0, 0, width, height);
    去掉才真的不闪
    qyxx
        30
    qyxx  
       2018-09-19 15:28:39 +08:00
    24fps 视频和 60fps 视频、144fps ( hz )的游戏人眼看上去都会有明显区别。电影的 24fps 是视频采集和处理时就已经是平滑的画面了,所以放映时能感觉到连贯。在运动场景,较低的拍摄帧率 暂停时会得到运动模糊的画面,虽然帧数不高但显也得自然。而拍摄就使用高帧率的话暂停也能看到清晰的画面,所以也是有区别的。如果帧率低又没有运动模糊的视频,看起来也会显得卡顿,比如把高帧率的运动视频直接减掉帧数。所以在需要实时响应的电脑画面和游戏响应上,越高越好,都是能看得出的。我现在用 144hz 的显示器看 24-30 帧的视频都会有明显的卡顿感,不用补帧看根本看不下去。
    digimoon
        31
    digimoon  
       2018-09-19 15:43:22 +08:00
    lz 是想在液晶上模拟显示以前 crt 扫描吗?

    @qyxx 游戏会觉得怪我觉得是因为游戏帧间隔不稳定的原因,毕竟前半秒显示 59 帧后半秒显示 1 帧也叫 60fps,视频 24fps 和 60fps 能看出流畅度差别,但是 24fps 的帧间隔时间稳定的话人看久了应该就习惯了不会太难受
    qyxx
        32
    qyxx  
       2018-09-19 15:48:03 +08:00
    @digimoon 游戏即使稳定 60 帧,和稳定 144 帧还是能看得出差别的,用了 144hz 显示器你会发现连最普通的鼠标滑动都流畅了很多,系统 UI 也感觉更顺滑了。而视频感觉 24-30 简直是幻灯片,特别是在运动场景下能看到两帧之间的不平滑 从左边一下子飞到右边。和流畅的系统 UI 帧数形成了对比,就感觉看 24-30 帧视频非常不爽
    meteor957
        33
    meteor957  
       2018-09-19 16:25:47 +08:00
    跟看鬼片似的 打开吓我一跳
    pkoukk
        34
    pkoukk  
       2018-09-19 17:15:53 +08:00
    楼主是根据那个截图的问题来的灵感么?
    问题是不清空旧帧的话,截图出来的还是全的。清除的话,画面会严重闪烁
    jy02534655
        35
    jy02534655  
       2018-09-19 17:41:17 +08:00
    https://aaron-bird.github.io/CanvasDemo/tel.html
    显示器:144hz
    操作系统:win10 家庭版 64 位 17134
    谷歌浏览器:69.0.3497.100 一开始图片狂闪,后面趋于稳定
    edge:一开始无图片,后面稳定
    ymj123
        36
    ymj123  
       2018-09-19 17:46:51 +08:00 via Android
    卧槽,一直在闪啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   979 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:06 · PVG 06:06 · LAX 14:06 · JFK 17:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.