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

[zhouchijian]

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

[zhouchijian]

@jakezh 那老哥你是怎么解决这种问题的

[zhouchijian]

@reus 闪应该是正常的。。因为我每帧都绘制 10 个点了。。每 16ms 绘制一次，改成每帧绘制 4 个点就舒服多了。。至于 svg，刚开始我也想用 svg 的，因为项目的老代码也是用 canvas 来做心电图的，然后时间紧，就想着继续用 canvas，没有用 svg，因为以前也没写过 svg 。。

[cheng6563]

双缓冲，就不会闪了。。。。这不是基本操作吗

[zhouchijian]

@cheng6563 不清楚耶，第一次搞这种图表

[reus]

@zhouchijian 用双缓冲： https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering
就是不要直接清空，而是在另一个 canvas 里更新，更新完了再切换，就不会闪了

[wangcheng]

不应该假设 requestAnimationFrame 每 16ms 绘制一次，应该用 requestAnimationFrame 回调中的第一个参数时间戳来计算动画。否则帧率不是 60 的时候动画速度就乱了。

[weixiangzhe]

按比例采样吧，

[redbuck]

渲染和生成路径(即更新 view model)分开.

生成路径随便 push.

渲染按照固定频率把路径绘制到 canvas 上.

[jakezh]

我是先渲染上，然后按照鼠标事件加动画。
没有你这种每秒全局刷新的需求