是音频波形可视化图，大概想法是这个样子，通过offlineAudioContext获取buffer，动态生成wave，resize时根据宽度重新渲染，整个过程都需要有动画，
现在用的是多个div+flex布局实现的，是否性能不如svg/canvas？
最开始用的是wavesurfer.js，用的是canvas，但是没有动画
尝试自行写canvas/svg之后发现
canvas在我的浏览器上很糊，ctx.scale(dpr,dpr)也不好使konva.js的动画会导致圆角形变svg没找到合适的库(gsap里没找到)，手写path比较麻烦请问各位大佬有没有什么好的解决方法？
 | 1 rannnn Sep 8, 2022  1 |
 | 2 subframe75361 OP @rannnn 感谢，好像有些效果了，但是放大到一定程度之后还是会糊掉... |
 | 3 bojue Sep 8, 2022 |
| 4 subframe75361 OP |
 | 5 renmu Sep 8, 2022 via Android 就这么几个元素，感觉性能大差不差。 |
 | 6 subframe75361 OP @renmu 最高大概在 150 个节点，一次性缩减到 30 个节点的时候会卡一下... |
 | 7 xieren58 Sep 9, 2022 1 pixi.js |
 | 8 rekulas Sep 9, 2022 1 pixi 配合相应的平滑迁移库可以试试，基于 webgl 渲染的 |
 | 9 macy Sep 9, 2022 1 wavesurfer.j 在前端处理波形图数据么？可能会很卡，建议放到后端去处理，直接生成 pcm 数据 |
 | 10 yuuko Sep 9, 2022 1 你的 canvas 要是显示宽度是 width ， 那你要创建 width * window.devicePixelRatio 大小的 canvas |
 | 11 thinkershare Sep 9, 2022 1 如果显示的不是非常复杂, 使用 SVG 足够了, 它底层会使用硬件加速, 如果绘制的非常复杂, 无法简单的使用 svg 完成矢量化, 使用 canvas,然后用 WebGL 搞, WebGL 的 JS 库非常多. 我们用了做三维建模和数字孪生, 模型特别复杂的时候如果没有独立显卡, 会卡, 目前没有解决办法, 你这个足够简单, 我估计 SVG/HTML(transform)/Canvas(2D/3D)实现都不会有啥问题. |
 | 12 alexsunxl Sep 9, 2022 推荐用 webgl ，上手之后，调整效果很方便的。 库也多，性能也好，特效平滑 |
 | 13 oldshensheep Sep 9, 2022 糊的话加上这个 CSS 属性 image-rendering: pixelated; 并且设置 context ctx.imageSmoothingEnabled= false 完全不糊 https://codepen.io/oldshensheep/pen/WNJwvRm |
| 14 subframe75361 OP |
 | 15 leonkfd Sep 9, 2022 1 很久以前写过一个音乐可视化的，用的是阿里的 G 渲染库。现在更新很多了，底层可选 svg/canvas/webgl 都行 https://leon-kfd.github.io/g-music-visualizer/ |
 | 16 jones2000 Sep 10, 2022 就这几根柱子，canvas 自己画下就够了。应该不需要用第 3 方库什么的。 |
Select Language