摘要：以前在網(wǎng)上看到了別人這個效果，感覺很酷也很難，但當真的去了解怎么做的時候會發(fā)現(xiàn)其實沒那么難。先來看一下效果可能不是很好看啊。

以前在網(wǎng)上看到了別人這個效果，感覺很酷也很難，但當真的去了解怎么做的時候會發(fā)現(xiàn)其實沒那么難。用到的就是canvas。

先來看一下效果

可能不是很好看啊。

1.先創(chuàng)建一個canvas（大小、樣式自己隨意定義）

2.獲取到當前的canvas，并準備畫圖。

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

3.畫圓形

context.arc(x, y, size, startAngle, endAngle); //這里就不寫順時針逆時針了

下面我們就來看看怎么做吧。我以對象的方法去創(chuàng)建圓形。

圓形構(gòu)造函數(shù)

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); //放到一個數(shù)組保存起來
}

創(chuàng)建圖形

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(); //移動函數(shù)
}

移動

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); //刪除那個元素
        }
    }    
}

當鼠標移動的時候創(chuàng)建圓形

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(); //創(chuàng)建每一個元素
        });
}

獲得隨機顏色函數(shù)

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);
}

當鼠標離開或點擊的時候清空畫布和當前數(shù)組

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

下面我們再來拓展一下功能

先看下效果：

就是能自定義球的大小和位移大小。

HTML結(jié)構(gòu)

    
    
當前半徑：
    
    
    
當前速度：
    
    

獲取各個大小并賦值

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) { //構(gòu)造函數(shù)
    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 () { //創(chuàng)建圖形
    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() { //產(chǎn)生隨機顏色
    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大小區(qū)域內(nèi)繪制圖形，你可以修改在整個document上繪制圖形。