我想知道 Mike Bostock 的基于 SVG 的 stroke-dash interpolation method 的基于画布的实现。我收集到画布与 SVG 的区别之一是，因为“一旦绘制了一个形状，就无法修改它或设置它的样式”（来自 Roger Veciana i Rovira）。那么这种方法原则上canvas可以支持吗，还是我会浪费我的时间？
如果可能的话，任何指针将不胜感激。
提前致谢。
【问题讨论】：
标签： d3.js
简短的回答是肯定的，您可以这样做，但您可能不想这样做。稍长一点的答案是它比 SVG 复杂得多——你不能使用相同的技术，因为这依赖于画布中不存在的东西。
当离开 SVG 时，您将失去 D3 为它提供的所有东西（这是由 SVG 本身提供的），例如线生成器、插值和 stroke-dasharray 属性。我制作了一个简单的（并且不是非常 D3 的）示例来为路径 here 设置动画。您可以看到基本技术，但对于任何更复杂的东西（例如，单个路径的动画绘制），您必须创建自己的插值器，为您提供沿路径的点序列并将这些点显式地一个接一个地绘制到画布上.这只是用于简单的线性插值。
因此，要在画布中重现上述示例，您需要实现一个函数，该函数在点之间使用基数样条插值路径，并允许您获取沿线的每个点的位置，然后将其传递给 @ 987654323@ 函数在稍稍延迟后绘制每个点，让您产生线条绘制平滑的错觉。对于开头的虚线，除了您必须获得破折号而不是点之外，它会很相似。
您可能会为此重用 D3 的 SVG 行生成器的部分实现，但这仍然需要相当大的努力。
【讨论】：