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

[zhouchijian]

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

[zhouchijian]

格式怎么乱掉了。。。

[qiayue]

抽稀

[qiayue]

合并、取样、抽稀

[imdong]

应该是一秒一帧，如何做到尽可能少的绘制。

看了你的格式，起码 0-36 这样的数据可以压缩为一次操作？

应该是类似折线图吧？最简单的能给出的意见就是这样。

连续在 dom 上绘制 速度比较慢，能不能把操作在内存绘制好，然后放到 dom 上呢？

一秒钟渲染一张图片应该问题不大，具体我也不懂，业余人士瞎比比。

[cornetCat]

1 秒渲染 250 个数据，不就是 250 帧了吗
这不对吧
想达到 60fps，应该是 1/60s 内渲染完 250 个数据

[Perry]

需求完全没说清楚，请先说清楚这 250 个数据是什么数据，需求是什么

[MoHen9]

每次多绘制几个点就行，人眼看不出来区别的，我在 Android 上也是这样做的，我们用 C++做的客户端也不会一次只绘制一个点，采样率有可能是 1000/s，难道也要每秒绘制 1000 次？

楼上方法也可以

[hakono]

我看你这数据，感觉是一秒渲染一次啊
如果后端给你的数据是每帧数据，先不提渲染赶不赶得上，你显示器首先刷新率绝对就没有 250Hz 吧，就算真渲染出了 250fps，你这也是没有任何用处啊。直接 250 个数据每隔 10 个取一个数，渲染成 25fps 人眼都感觉不太出区别

[binux]

250 个标量？别说 250 个了，25000 个都没问题

[whileFalse]

大哥，一秒传你一次数据，其中包含 250 个数，那其实是 1hz 啊……只不过每次屏幕更新要在已有数据基础上绘制 250 个点而已。如果忽略数据处理、网络传输、绘制等时间，数据从收集到展现的平均时间是 0.5s 。

当然，用户可以觉得这种仿照微软 windows 任务管理器的更新速度不够接地气，并愿意加一倍的钱让他更新速度变快。那你就可以每秒钟绘制 2 帧（ 2hz ），并每帧绘制 125 个点。依照这种思路，只要用户肯出 60 倍的钱，你就可以每秒绘制 60 次，每次绘制 4 个点或 5 个点。你可以以 settimeout 方式执行每秒多次绘制。

如果用户肯出 100 倍的钱一劳永逸地完美地解决这个问题，那你就用 requestAnimationRequest 吧。你可以很简单地计算出上一次执行到本次执行之间用了多少毫秒，然后除以 4 （即 1000/250 ），得出你本次应该绘制的点的数量。此外，你还应该对上次绘制的图进行平移。

[zhouchijian]

@hakono 怪我没说清楚，其实要的效果就是类似于扫描动画
类似于这种
http://pic.16xx8.com/allimg/110810/1A0303356-0.gif
https://nas-1253716007.cos.ap-guangzhou.myqcloud.com/1591495891362.mp4

[zhouchijian]

@MoHen9 有道理，每次只绘制一个点太蠢了

[zhugefubin]

一下绘制一组数据不行么

[binbinyouliiii]

4K 显示器有 3840*2160 个像素点，岂不是有 3840*2160 的刷新率

[zhouchijian]

@imdong 其实就是折线图，但是要求有动画效果，就是类似于那种扫描效果，现在是每次只绘制一个点，你说的对，应该尽可能少的绘制

[zhouchijian]

@zhugefubin 我也想这么简单粗暴，但是要有动画效果

[7gugu]

不考虑一下现有的图表库么？比如 Echarts 和 Uchart 等.

[reus]

你一秒渲染多少帧，和屏幕刷新率有什么关系？

那些游戏一秒几十几百帧，为什么可以显示？

一辆车从你眼前开过，你眨一下眼睛，难道车会根据你眨眼睛慢了，速度就变了？

显示器就是你的眼睛，只是在采样观察外部世界，而外部世界并不会受你的眼睛影响。

[zhugefubin]

我对这个不是很懂
@zhouchijian

[abelce]

你一秒渲染一次就可以了呀，我以前渲染几十万个点都没毛病