以前在网上看到了别人这个效果，感觉很酷也很难，但当真的去了解怎么做的时候会发现其实没那么难。用到的就是canvas。

先来看一下效果

1.先创建一个canvas（大小、样式自己随意定义）

<canvas id="canvas" width="300" height="300"></canvas>

2.获取到当前的canvas，并准备画图。

let canvas = document.getElementById('canvas'),     context = canvas.getContext('2d');

3.画圆形

context.arc(x, y, size, startAngle, endAngle); //这里就不写顺时针逆时针了

下面我们就来看看怎么做吧。我以对象的方法去创建圆形。

• 圆形构造函数

function Circle(x, y, size, speed) {    this.x = x; //x坐标    this.y = y; //y坐标    this.size = size; //大小    this.color = getRandomCokor(); //随机的颜色    this.X = getRandom(speed); //x轴随机的移动速度    this.Y = getRandom(speed); //y轴随机的移动速度    circleArr.push(this); //放到一个数组保存起来}

• 创建图形

Circle.prototype.createCircle = function () {    context.beginPath();    context.arc(this.x, this.y, this.size, 0, 2*Math.PI);    context.fillStyle = this.color; //填充的颜色    context.fill();     context.stroke();     this && this.move(); //移动函数}

• 移动

Circle.prototype.move = function () {    this.x += this.X; //x轴位移量    this.y += this.Y; //Y轴位移量    this.r -= 1; //半径缩小的尺寸（这里我就直接固定大小了）    if(this.r <= 0){        this.delCircle(); //如果半径小于0，删除元素    } }

• 删除

Circle.prototype.delCircle = function () {    for (let i = circleArr.length - 1; i >= 0; i--) {        if(circleArr[i] === this){            circleArr.splice(i, 1); //删除那个元素        }    }    }

• 当鼠标移动的时候创建圆形

canvas.onmousemove = function mousemove(e) {    let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);        context.clearRect(0, 0, canvas.width, canvas.height); //每次清理干净画布        circleArr.forEach( function(element, index) {            element.createCircle(); //创建每一个元素        });}

• 获得随机颜色函数

function getRandomCokor() {    let colorR = getRandom(255),        colorG = getRandom(255),        colorB = getRandom(255),        rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;    return rgb;}function getRandom(num) {    return Math.floor( Math.random(0, 1) * (num) + 1);}

• 当鼠标离开或点击的时候清空画布和当前数组

canvas.onmouseleave = canvas.onmousedown = function mouseDown() {    circleArr.length = 0;    context.clearRect(0, 0, canvas.width, canvas.height);}

• 下面我们再来拓展一下功能

先看下效果：

• HTML结构

    
    
         
     
当前半径：
    
         
         
     
当前速度：
    
         
     
    

• 获取各个大小并赋值

let rRange = document.getElementById('rRange'), //大小    rText = document.getElementById('rText'), //大小显示框    speedRange = document.getElementById('speedRange'), //速度    speedText = document.getElementById('speedText')， //速度大小显示框    rValue = +rRange.value, //大小    speedValue = +speedRange.value; //速度 rText.value = rValue; //赋值显示 speedText.value = speedValue; //赋值显示

• 当改变的时候重新赋值

rRange.onchange = function valueChange(e) { //大小    rValue = + this.value;    rText.value = rValue;}speedRange.onchange = function valueChange(e) { //速度    speedValue = + this.value;    speedText.value = speedValue;}

+整体代码

let canvas = document.getElementById('canvas'), //获取canvas    rRange = document.getElementById('rRange'), //大小    rText = document.getElementById('rText'),     speedRange = document.getElementById('speedRange'), //速度    speedText = document.getElementById('speedText'),    context = canvas.getContext('2d'),    circleArr = [],    rValue = +rRange.value,    speedValue = +speedRange.value;rText.value = rValue; //赋值显示speedText.value = speedValue;function Circle(x, y, size, speed) { //构造函数    this.x = x;    this.y = y;    this.size = size;    this.color = getRandomCokor();    this.X = getRandom(speed);    this.Y = getRandom(speed);    circleArr.push(this);}Circle.prototype.createCircle = function () { //创建图形    context.beginPath();    context.arc(this.x, this.y, this.size, 0, 2*Math.PI);    context.fillStyle = this.color;    context.fill();    context.stroke();    this && this.move();} Circle.prototype.move = function () { //移动    this.x += this.X;    this.y += this.Y;    this.r -= 1;    if(this.r <= 0){        this.delCircle();    } }Circle.prototype.delCircle = function () { //删除    for (let i = circleArr.length - 1; i >= 0; i--) {        if(circleArr[i] === this){            circleArr.splice(i, 1);        }    }    }rRange.onchange = function valueChange(e) { //大小改变的时候重新赋值    rValue = + this.value;    rText.value = rValue;}speedRange.onchange = function valueChange(e) { //速度改变的时候重新赋值    speedValue = + this.value;    speedText.value = speedValue;}canvas.onmousemove = function mousemove(e) {  //鼠标在canvas上移动    let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);        context.clearRect(0, 0, canvas.width, canvas.height);         circleArr.forEach( function(element, index) {            element.createCircle();        });}canvas.onmouseleave = canvas.onmousedown = function mouseDown() {    circleArr.length = 0;    context.clearRect(0, 0, canvas.width, canvas.height);}function getRandomCokor() { //产生随机颜色    let colorR = getRandom(255),        colorG = getRandom(255),        colorB = getRandom(255),        rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;    return rgb;}function getRandom(num) {    return Math.floor( Math.random(0, 1) * (num) + 1);}

我只在canvas大小区域内绘制图形，你可以修改在整个document上绘制图形。