Javascript Canvas与SVG在音波图像交互中的应用

我正在构建一个工具，以便在我将要去的地方播放音频。
音频图像如下所示：

用户界面将以另一种颜色显示已播放的区域作为尚未播放的区域，并能够放大特定区域

我可以用画布来实现这一点，并在顶部添加一个不透明度div作为一个层来显示播放/未播放的区域，根据音频中的位置更改

左侧的位置。另一种方法是每次位置更新时重新渲染，以在播放/未播放区域显示不同的颜色

在画布中缩放的可能性将是一个重新渲染，我也同意

我也可以在SVG中实现这一点，在这种情况下，缩放可能会更容易，显示播放区域将是特定
路径
或
行
的
笔划
颜色的变化

我的问题：

这是一个“两个选项都有效”的场景，还是我应该使用技术而不是另一个，以及为什么？
我建议在这种情况下使用画布。
SVG在画布上提供的所有内容（例如DOM、命中检测、动画、过滤器等）都不会被使用，但会对应用程序的性能产生负面影响。
您好，感谢您查看此内容。我指的是播放和未播放区域的动画，以及缩放的可能性。您能详细说明一下您认为在这些功能方面，
canvas
比SVG更好的方式吗？@Rikard我同意这个答案。SVG将使本应非常简单的渲染工作过于复杂。然而，这将取决于您作为程序员的技能以及您对SVG或CanvasAPI的了解程度。这是因为在处理大型数据集（如解码的声音流）时存在许多陷阱。44khz的5分钟立体声音轨有2600多万个样本，实时缩放和平移不是一件容易的事情。这是您应该集中精力的地方，而不是api将如何进行渲染。@Blindman67很好的反馈，谢谢。是的，我知道这些陷阱，而且缩放工具可能需要一个去抖动器或节流阀，以避免在缩放的每一步调用缩放逻辑。我缺乏经验的地方是，在每个缩放或播放步骤中生成画布的
循环
总体上比SVG路径（例如波形）更快/更好，并使用SVG进行放大和缩小。@Rikard我快速查看了您的代码，您这样做的方式在画布中永远不会起作用。我相信在渲染波形时，您已经意识到了这一点。具有跟踪和平滑缩放功能的全屏画布波形完全在画布的能力范围内。（还有SVG）在画布上使用requestAnimationFrame进行渲染。但您不能为每个水平像素绘制100条线。您需要对数据进行预采样。执行一些性能测试，以便了解哪些方法是最快的渲染解决方案。还有，这里没有解释的余地。@Blindman67是的，谢谢。这只是一个静态测试，我不确定在svg中使用笔划颜色的更改是否有效，因为您可能希望所有笔划都是一条路径，在这种情况下，您不能混合笔划颜色。但是，您可以按照您的画布建议执行相同的操作，并使用不透明度覆盖。就我个人而言，我会开始编写代码，并尽可能使大部分代码与库无关，这样您就可以尝试在其他解决方案中进行交换，而不必对代码进行太多重构。如果您需要与wave进行良好的交互，我会在画布上使用svg，但听起来您并不需要，所以我认为两者都可以。