这是一个创建于 816 天前的主题，其中的信息可能已经有所发展或是发生改变。
是音频波形可视化图，大概想法是这个样子，通过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 2022-09-08 23:30:39 +08:00  1
|
 |
2
subframe75361 OP @rannnn 感谢，好像有些效果了，但是放大到一定程度之后还是会糊掉...
|
 |
3
bojue 2022-09-08 23:46:52 +08:00
|
|
4
subframe75361 OP |
 |
5
renmu 2022-09-08 23:48:07 +08:00 via Android
就这么几个元素，感觉性能大差不差。
|
|
6
subframe75361 OP @renmu 最高大概在 150 个节点，一次性缩减到 30 个节点的时候会卡一下...
|
 |
7
xieren58 2022-09-09 00:58:15 +08:00 1
pixi.js
|
 |
8
rekulas 2022-09-09 07:53:21 +08:00 1
pixi 配合相应的平滑迁移库可以试试，基于 webgl 渲染的
|
 |
9
macy 2022-09-09 09:28:34 +08:00 1
wavesurfer.j 在前端处理波形图数据么？可能会很卡，建议放到后端去处理，直接生成 pcm 数据
|
 |
10
yuuko 2022-09-09 09:41:12 +08:00 1
你的 canvas 要是显示宽度是 width ， 那你要创建 width * window.devicePixelRatio 大小的 canvas
|
 |
11
thinkershare 2022-09-09 10:26:59 +08:00 1
如果显示的不是非常复杂, 使用 SVG 足够了, 它底层会使用硬件加速, 如果绘制的非常复杂, 无法简单的使用 svg 完成矢量化, 使用 canvas,然后用 WebGL 搞, WebGL 的 JS 库非常多. 我们用了做三维建模和数字孪生, 模型特别复杂的时候如果没有独立显卡, 会卡, 目前没有解决办法, 你这个足够简单, 我估计 SVG/HTML(transform)/Canvas(2D/3D)实现都不会有啥问题.
|
 |
12
alexsunxl 2022-09-09 10:59:22 +08:00
推荐用 webgl ，上手之后，调整效果很方便的。
库也多，性能也好，特效平滑 |
 |
13
oldshensheep 2022-09-09 11:46:16 +08:00
糊的话加上这个 CSS 属性
image-rendering: pixelated; 并且设置 context ctx.imageSmoothingEnabled= false 完全不糊 https://codepen.io/oldshensheep/pen/WNJwvRm |
|
14
subframe75361 OP |
 |
15
leonkfd 2022-09-09 17:53:13 +08:00 1
很久以前写过一个音乐可视化的，用的是阿里的 G 渲染库。现在更新很多了，底层可选 svg/canvas/webgl 都行
https://leon-kfd.github.io/g-music-visualizer/ |
 |
16
jones2000 2022-09-10 17:26:18 +08:00
就这几根柱子，canvas 自己画下就够了。应该不需要用第 3 方库什么的。
|
Select Language