html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景

关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧

前言

相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！

下面我会直击重点，用最短的时间，使用Canvas制作鼠标跟随动画

如何制作动画

常用的绘图动画的方式有以下几种：

CSS3

SVG

Canvas

WebGL

让我们先分析分析这些方法的优劣性

CSS3 通过css3的关键帧等方式实现动画效果，看起来好像挺实用，但这样增加了一个没有意义的DOM节点，不符合语义化编程规范

SVG、Canvas 都可以使用脚本语言来实现动画

SVG 本质上是使用XML描述2D图形的语言(矢量图)，SVG创建的每一个元素都是一个独立的DOM元素，既然是独立的DOM元素，那表示我们可以通过CSS和JS来控制DOM，也可以对每一个DOM元素进行监听，但由于都是DOM元素，所以如果我们修改了SVG中的DOM元素，浏览器就会自动进行DOM重绘

Canvas通过Javascript来绘制2D图形(位图)，而Canvas只是一个HTML元素，其中的图形不会单独创建DOM元