javascript - Canvas 与 SVG 之声波图像交互

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 6 年前。

Improve this question

我正在构建一个工具来播放音频，我将在showing the wave image of the audio file .
音频图像如下所示:

UI会将已播放区域以另一种颜色显示为未播放区域，并且还可以放大特定区域。

我可以使用 Canvas 来做到这一点，并添加一个不透明的 div 作为顶部的图层以显示已播放/未播放的区域，从而更改 left根据音频中的位置进行定位。另一种方法是每次位置更新时重新渲染，以在已播放/未播放区域显示不同的颜色。

我认为 Canvas 中的缩放可能性也将重新渲染。

我也可以在 SVG 中执行此操作，在这种情况下，缩放可能会更容易，并且显示播放区域将是 stroke 中的更改。具体颜色path或line .

我的问题:

这是“两个选项都有效”的场景，还是我应该使用其他技术而不是其他技术，为什么？

Answer 1

在这种情况下我建议使用 Canvas 。SVG 必须通过 Canvas 提供的所有内容，例如DOM、点击检测、动画、过滤器等将不会被使用，但会对应用程序的性能产生负面影响。