这是一个创建于 2578 天前的主题，其中的信息可能已经有所发展或是发生改变。
把图片分成两半交替显示, 图像会闪动.
预览 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 后会有用吧.
 | 1 GiantHard 2018-09-19 07:46:01 +08:00 via Android 我的猜测，多分几份，前后两帧之间最好有重叠部分，这样看起来会好一些。 |
 | 2 wjm2038 2018-09-19 08:01:23 +08:00 via Android 可能就刚好在没绘制的时候看到了背景吧。。也有可能是没有真正的 60 帧？ |
 | 3 zhyl 2018-09-19 08:04:29 +08:00 via Android  1 因为你不断 clearrect 整个画布 |
 | 4 lmmortal 2018-09-19 08:04:31 +08:00 把页面背景调黑试试？ |
 | 5 oxoxoxox 2018-09-19 08:05:25 +08:00 via Android 你是正常图片和白色背景交替？ 你换成黑色背景再试试看呢 |
 | 6 Trim21 2018-09-19 08:06:04 +08:00 via Android 4 24 帧的帧和帧之间也没有显示一次白色的背景啊… |
 | 7 Cyron 2018-09-19 08:15:24 +08:00 via iPhone 1 视频里添加一帧图片也可以明显看出来的，原理相同 |
| 8 Cyron 2018-09-19 08:17:13 +08:00 via iPhone 6 楼说的对，你这是相当于图片和背景交替每张 30 帧 |
 | 9 zhs227 2018-09-19 08:18:21 +08:00 尝试了每个 rafj 里 hidden，下一个 raf 打开。也是一样闪。 |
 | 10 cjpjxjx 2018-09-19 08:30:23 +08:00 via Android 1 个人猜测：电影 24 帧，每一帧都和前一帧相差不大，通过视觉残留就成了视频，在这个过程中并不会显示背景，然而这个图片虽然 60 帧，但确是图片和背景交替显示，图片有视觉残留，然而背景也会有视觉残留，不管是什么颜色 |
 | 11 SimonTart 2018-09-19 08:33:47 +08:00 1 |
 | 12 whileFalse 2018-09-19 08:34:17 +08:00 via iPhone 1 你怎知胶片电影不闪呢？ 电影院里 帧率 24，每帧时长 1/24，不闪 你的，帧率 30，每帧 1/60，闪 胶片电影，帧率 24，每帧时长<1/24，但注意，电影是要在夜里，用很高的亮度投射出来的，的视野里只有电影。物体越亮，视觉暂留越久。如果你有 AMOLED 屏幕的手机，可以试试全屏后躲在被窝里看，效果会好一些。 |
 | 13 oyhw92 2018-09-19 08:58:51 +08:00 via iPhone 背景放一张高斯模糊过的图片试试 |
 | 14 kerr92 2018-09-19 09:06:04 +08:00 3 ```js canvasCtx.clearRect(0, 0, width, height); canvasCtx.drawImage(...arr[i]); ``` 理论上闪烁的原因在于你每次画新帧的时候都把前一帧清空了，如果基于 canvas 做动画，应该是直接用新帧覆盖前一帧，而不是清空重画。 |
 | 15 460881773 2018-09-19 09:18:04 +08:00 楼上说的有道理 |
 | 16 koalli 2018-09-19 09:49:33 +08:00 1 视觉残留是第一帧和第二帧比较相似的时候直接切换才会视觉残留，你这样等于第一帧是图，第二帧是清空的，无法视觉残留... |
 | 17 Gimini 2018-09-19 10:14:15 +08:00 1 实际上就是你背景和图片交替，各自 30 帧，视觉残留了图像也残留了背景 |
 | 18 wangjie 2018-09-19 10:46:48 +08:00 盯着看一会儿后关掉那个页面看屏幕的那个地方还是在闪 |
 | 19 cent777 2018-09-19 10:54:55 +08:00 |
 | 20 KevZhi 2018-09-19 11:08:07 +08:00 via iPhone 1 人眼能感知到的闪烁频率 48HZ，初期模拟电视为了避免闪烁采用了隔行扫描，25p 的画面分成了 50i，所以不应该用 24hz，应该两倍或更高。 请参阅《现代电视技术》等基础课程 |
| 21 KevZhi 2018-09-19 11:09:27 +08:00 via iPhone 24hz 只是人眼能识别为连贯画面而不是单独画面的阈值，不感知到闪烁需要 48hz |
 | 22 also24 2018-09-19 11:25:59 +08:00 1 为什么要闪原图，应该闪水印啊 一张水印在上，一张水印在下 |
| 23 also24 2018-09-19 11:29:37 +08:00 补充，上下水印的话刷新频率可能不够，应该把图片切成几百份，然后随机选择 2~3 份出现水印，并逐个更换。 只需要保证水印在人眼中不出现视觉残留就行了。 |
 | 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]); |
 | 25 noe132 2018-09-19 12:35:03 +08:00 连 pwm 背光几百 hz 的闪烁都有人觉得看了伤眼，你这个去取 60hz 肯定很明显。 |
 | 26 w88975 2018-09-19 13:41:01 +08:00 via iPhone 这样交替显示有啥好处呢 |
 | 27 zhzer 2018-09-19 13:47:09 +08:00 via Android 因为电脑 cpu gpu 还要加工一道 |
 | 28 CSGO 2018-09-19 14:35:15 +08:00 你这个在我 240hz 的显示器上看还行啊。 |
 | 29 cs8425 2018-09-19 15:06:34 +08:00 https://aaron-bird.github.io/CanvasDemo/tel.html 这个还是闪 这行 canvasCtx.clearRect(0, 0, width, height); 去掉才真的不闪 |
 | 30 qyxx 2018-09-19 15:28:39 +08:00 24fps 视频和 60fps 视频、144fps （ hz ）的游戏人眼看上去都会有明显区别。电影的 24fps 是视频采集和处理时就已经是平滑的画面了，所以放映时能感觉到连贯。在运动场景，较低的拍摄帧率 暂停时会得到运动模糊的画面，虽然帧数不高但显也得自然。而拍摄就使用高帧率的话暂停也能看到清晰的画面，所以也是有区别的。如果帧率低又没有运动模糊的视频，看起来也会显得卡顿，比如把高帧率的运动视频直接减掉帧数。所以在需要实时响应的电脑画面和游戏响应上，越高越好，都是能看得出的。我现在用 144hz 的显示器看 24-30 帧的视频都会有明显的卡顿感，不用补帧看根本看不下去。 |
 | 31 digimoon 2018-09-19 15:43:22 +08:00 lz 是想在液晶上模拟显示以前 crt 扫描吗？ @qyxx 游戏会觉得怪我觉得是因为游戏帧间隔不稳定的原因，毕竟前半秒显示 59 帧后半秒显示 1 帧也叫 60fps，视频 24fps 和 60fps 能看出流畅度差别，但是 24fps 的帧间隔时间稳定的话人看久了应该就习惯了不会太难受 |
| 32 qyxx 2018-09-19 15:48:03 +08:00 @digimoon 游戏即使稳定 60 帧，和稳定 144 帧还是能看得出差别的，用了 144hz 显示器你会发现连最普通的鼠标滑动都流畅了很多，系统 UI 也感觉更顺滑了。而视频感觉 24-30 简直是幻灯片，特别是在运动场景下能看到两帧之间的不平滑 从左边一下子飞到右边。和流畅的系统 UI 帧数形成了对比，就感觉看 24-30 帧视频非常不爽 |
 | 33 meteor957 2018-09-19 16:25:47 +08:00 跟看鬼片似的 打开吓我一跳 |
 | 34 pkoukk 2018-09-19 17:15:53 +08:00 楼主是根据那个截图的问题来的灵感么？ 问题是不清空旧帧的话，截图出来的还是全的。清除的话，画面会严重闪烁 |
 | 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：一开始无图片，后面稳定 |
 | 36 ymj123 2018-09-19 17:46:51 +08:00 via Android 卧槽，一直在闪啊 |
Select Language