关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧
gitHub传送门
前言
相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！
下面我会直击重点，用最短的时间，使用 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元素，所以我们无法通过Js来操作Canvas内的图形，也无法监听具体图形
WebGL 用于3D展示、动画、游戏，说白了就是基于Canvas的3D框架
Canvas、SVG适用场景
Canvas 适用于位图，高数据量绘制频率的场景，小游戏，小特效，绘制图表、活动页面、炫酷背景
SVG 适用于矢量图，低数据量绘制频率的场景，如图形图表
直击重点，制作鼠标跟随动画
最终效果
需求分析：鼠标移动，经过的地方创建一个圆，圆的半径大小由小变大，达到某个固定大小时该圆消失，圆的颜色随机变化
创建全屏Canvas元素
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
WIDTH = canvas.width = document.documentElement.clientWidth,
HEIGHT = canvas.height = document.documentElement.clientHeight,
para = {
num: 100,
color: false, // 颜色 如果是false 则是随机渐变颜色
radius: 0.9, // 圆每次增加的半径
o: 0.09, // 判断圆消失的条件，数值越大，消失的越快
},
color,
circleColor,
round_arr = []; // 存放圆的数组 监听鼠标
onmousemove 事件需求：在鼠标移动的过程中，不断在鼠标滑过的位置产生一个逐渐变大的圆
