Canvas<粒子svg效果>

效果图：

202003191647.gif
想了解基础的，可参考文章https://www.jianshu.com/p/e2f463fa57af

🎈此篇文章基本是针对粒子文字效果的改造或着复用，主要是通过对 svg 路径的处理，在canvas进行 moveTo lineTo，完成路径的绘制。

🏓但前提是 path里面的d值必须是 M 220 20 L 41 50 此种格式，方便进行截取和处理

此处的svg是网上找的，绘图深厚的可以直接自己绘制相关路径，并导出，也可以实现不同的效果(此处针对svg图片绘制位置，可能需要自己微调，有机会会逐渐完善的 😁)

截取方法：

    let d = "M 94.503 39.224 L 41.087 169.658 M 40.5 169.5 L 50.5 231 M 50.5 230.5 L 80.5 309 M 94.5 40.5 L 58.5 165.5"
    let d_Array = []
    for (let i = 0; i < d.split('M').length; i++) {
        if (d.split('M')[i].split(" ")[1]) {
            let Line = {
                M_x: d.split('M')[i].split(" ")[1],
                M_y: d.split('M')[i].split(" ")[2],
                L_x: d.split('M')[i].split(" ")[4],
                L_y: d.split('M')[i].split(" ")[5],
            }
            d_Array.push(Line)
        }
    }

后来的基本就是沿用粒子文本的效果进行添加粒子覆盖和鼠标移动特效，所以此处就不废话了

代码如下：