工作上有个需求， canvas 一秒渲染 250 个数据，不可能做到吧

[zhouchijian]

需求是这样的， 要用 canvas 画出心电图，后端 1 秒给我传 1 个数组，数组里有 250 个数据 结构是这样的 https://nas-1253716007.cos.ap-guangzhou.myqcloud.com/mmexport1591493767956.png 但是呢，实际效果就是，渲染速度跟不上后端给我数据的速度。 我是用了 requestAnimationRequest 来循环渲染数据的。 想了一下，1 秒渲染 250 个数据，不就是 250 帧了吗，普通的屏幕才 60hz 的刷新率，感觉不可能做到的啊

[zhouchijian]

@reus 对喔。。难道是我理解错刷新率了

[zhouchijian]

@7gugu 不给用 echarts，原因我也不知道

[zhouchijian]

@abelce 不行，要有动画，一秒渲染一次就没动画了

[jackmod]

markdown 要 2 次换行才是新段落，发之前点一下预览

[reus]

@zhouchijian 动画的话，每秒渲染 30 次左右就够了，也就是 256/32，每次渲染 8 个点，每 1000/32ms 渲染一次

[reus]

@zhouchijian 一秒一次就是 1hz 的动画，怎么叫没有？

[rockjike]

一桢更新 10 个数据，一个周期不一定要 1s，可以先把后端数据储存起来

[Cabana]

1 秒 250 个数据分成 25 帧，一帧绘制 10 个数据不行吗？

[nightv2]

比如说每秒在内存中把 250 个数据生成一个折线图，然后和上一秒的折线图做一个带有动画效果的切换，切换应该是有现成的轮子的

[javaluo]

每秒渲染一次，弄一个遮罩平行移动展示出来不就行了？

[aturx]

同事做过类似的，要动画效果，可以传数据的时候可以几秒传一组数据，渲染的时候频率高点持续渲染。

[justin2018]

https://www.html5tricks.com/demo/html5-canvas-electrocardiogram/index2.html


[zhouchijian]

@justin2018 对，就是这种效果

[zhouchijian]

楼上各位老哥的意思我都懂，就是一次绘制多个点，不要只绘制一个点，抽空写了个小 demo

https://jsrun.net/xM2Kp

[sarlanori]

这个和我们绘制频谱图波形图是一样的，你这个相当于一秒一帧，一帧数据有 250 个点，你只需要连续绘制就可以了，每次数据来了就把可视区域内的数据重新绘制，自然就有了动态效果。

[ghostheaven]

动画和绘制的时间精确控制在一秒，开始的时候缓存几秒数据再开始

[Torpedo]

你延迟一秒画。
不就变成你有 250 个数据，然后在 1s 里，60 帧，每帧画 4 个。

[reus]

@zhouchijian 闪瞎眼……不要每次都重绘，做一下平移，然后渲染新的点就行了。这么闪，还不如用 svg，至少不闪……

[jiejiss]

动画效果 30Hz 足够用了，你每帧绘制 8 - 9 个点就行

但是 requestAnimationFrame 每帧之间的间隔不一定一样，比如设备卡了上一个 frame 和下一个 frame 之间间隔 1s 怎么办？所以你可以整个全局数组，拿 setInterval 以固定的频率（比如 30Hz ）往里 push 数据，然后在 requestAnimationFrame 里把这个数组里的全部数据消费掉

[jakezh]

那我这种一秒渲染 50 万个数据的怎么算帧率？