javascript - 像这种绘制路径的动画实现思路是什么？

Question

想这样的用canvas实现方便还是其他技术。最好是可以自定义文字！

Answer 1

CSS3的@keyframes和animation一起用可以实现这个动画，@font-face可以实现自定义字体，但是兼容性只适合高版本的浏览器。用canvas的话应该也可以实现。

Answer 2

用动图最方便

用代码的话，我能想到的方法是首先定义出每个字符的各个部分的曲线，然后逐渐画出这些曲线（可能要定义每一帧画哪些曲线，以及画到什么位置等），最后在形成的封闭图形里填充颜色，由背景色（蓝色）过渡到目标颜色（白色和红色）。

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

把整个图分割为若干个path, 每次用不同的segments重画所有path
比如弧长是100. 第一次用segments [0, 100], 第二次用[1,99] ...

SVG也有类似的属性.

---

大头在于Canvas和SVG都没有(把字符转为path)的API. 你可能要用其他方法生成path.