动画渲染选择 svg/canvas？

[subframe75361]

https://ibb.co/C2VtZ24

是音频波形可视化图，大概想法是这个样子，通过offlineAudioContext获取buffer，动态生成wave，resize时根据宽度重新渲染，整个过程都需要有动画，

现在用的是多个div+flex布局实现的，是否性能不如svg/canvas？

最开始用的是wavesurfer.js，用的是canvas，但是没有动画

尝试自行写canvas/svg之后发现

• canvas在我的浏览器上很糊，ctx.scale(dpr,dpr)也不好使
• konva.js的动画会导致圆角形变
• svg没找到合适的库(gsap里没找到)，手写path比较麻烦

请问各位大佬有没有什么好的解决方法？

[rannnn]

模糊是因为这个？ http://diveintohtml5.info/canvas.html#pixel-madness

[subframe75361]

@rannnn 感谢，好像有些效果了，但是放大到一定程度之后还是会糊掉...

[bojue]

@subframe75361

模糊一般有两个方案：0.5 偏移+等比例缩放

[subframe75361]

https://codepen.io/subframe7536/pen/wvjMxzK

[renmu]

就这么几个元素，感觉性能大差不差。

[subframe75361]

@renmu 最高大概在 150 个节点，一次性缩减到 30 个节点的时候会卡一下...

[xieren58]

pixi.js

[rekulas]

pixi 配合相应的平滑迁移库可以试试，基于 webgl 渲染的

[macy]

wavesurfer.j 在前端处理波形图数据么？可能会很卡，建议放到后端去处理，直接生成 pcm 数据

[yuuko]

你的 canvas 要是显示宽度是 width ， 那你要创建 width * window.devicePixelRatio 大小的 canvas

[thinkershare]

如果显示的不是非常复杂, 使用 SVG 足够了, 它底层会使用硬件加速, 如果绘制的非常复杂, 无法简单的使用 svg 完成矢量化, 使用 canvas,然后用 WebGL 搞, WebGL 的 JS 库非常多. 我们用了做三维建模和数字孪生, 模型特别复杂的时候如果没有独立显卡, 会卡, 目前没有解决办法, 你这个足够简单, 我估计 SVG/HTML(transform)/Canvas(2D/3D)实现都不会有啥问题.

[alexsunxl]

推荐用 webgl ，上手之后，调整效果很方便的。
库也多，性能也好，特效平滑

[oldshensheep]

糊的话加上这个 CSS 属性
image-rendering: pixelated;
并且设置 context
ctx.imageSmoothingEnabled= false
完全不糊

https://codepen.io/oldshensheep/pen/WNJwvRm

[subframe75361]

@alexsunxl @oldshensheep @thinkershare 感谢指导！

[leonkfd]

很久以前写过一个音乐可视化的，用的是阿里的 G 渲染库。现在更新很多了，底层可选 svg/canvas/webgl 都行
https://leon-kfd.github.io/g-music-visualizer/

[jones2000]

就这几根柱子，canvas 自己画下就够了。应该不需要用第 3 方库什么的。