最近看到位博主的博客背景圖很是炫酷，查找下資料了解是canvas實現效果，今天就來看看詳細解剖下吧。

實現思路

首先了解下canvas中的動畫原理？canvas中的動畫其實是通過不斷的重繪來實現動起來的效果的。通過設計小球的位置變化，達到小球不斷運動的效果。同時也可以設計小球衍射，大小的變化實現其他效果。這裏就只涉及小球位置，顏色的變化吧。

1，定義小球對象。

var ball = {
    xPointer: 100, //小球初始x坐標
    yPointer: 100, //小球初始y坐標
    speedx: 1, //x方向的速度
    speedy: 0.1, //y方向的速度
    x: 1, //
 
x軸運動方向（1表示正方向，-1表示反方向）
    y: -1, //y軸運動方向
    color: "blue", //小球顏色
    radius: 10, //小球半徑
};

2，生成小球。定義一個數組來裝這些小球，小球的起始坐標、顏色、運動方向都不同所以這些值需要隨機獲取。

var count = 800;
var balls = []; //小球數組

function initBall() {
    canvas=document.getElementById("canvas");
    ctx=canvas.getContext("2d");
        //循環生成60個小球
        for
 
 (var i = 0; i < 60; i++) {
            // console.log(getIndex() + "   " + getIndex())
            var ball = {};
            ball.xPointer = getRandom(20, 980);//隨機小球的X坐標
            ball.yPointer = getRandom(20, 340);//隨機小球的y坐標
            ball.x = getIndex();//隨機小球x軸運動方向
            ball.y = getIndex();//隨機小球的y軸運動方向
 

            ball.speedx = Math.random();//隨機小球x軸方向速度
            ball.speedy = Math.random();//隨機小球y軸方向速度
            ball.radius = 9;//小球半徑
            ball.color = "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);//隨機小球顏色
            balls.push(ball);
        }
    }

           //隨機一個1或者-1的方法    
           function getIndex() {
                var arr = [0, 1];
                var index = Math.floor((Math.random() * arr.length));
                if (index == 0) {
                    index = -1;
                }
                return index;
            }

            //獲取兩數之間的一個隨機數的方法
            function getRandom(first, last) {
                var choice = last - first + 1;
                return Math.floor(Math.random() * choice + first);
            }

3，繪制小球。

 <canvas id="canvas" width="1500" height="1200" style=‘background-color: #EEEEEE;‘></canvas>

function draw(ctx) {
        ctx.clearRect(0, 0, 1000, 360);//繪制前先清除畫布
        for (var i = 0; i < balls.length; i++) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = balls[i].color;
            ctx.arc(balls[i].xPointer, balls[i].yPointer, balls[i].radius, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }
    }

4，運動起來 小球運動的過程中使用了簡單的碰撞檢測，每次到達畫布的邊緣就改變小球的運動方向。

//修改小球的狀態，使小球動起來的方法
        function update(balls, ctx) {
        for (var i = 0; i < balls.length; i++) {
            balls[i].xPointer += balls[i].vx * balls[i].x;
            balls[i].yPointer += balls[i].vy * balls[i].y;
            //碰撞檢測 X軸方向
            if (balls[i].xPointer + balls[i].radius >= canvas.width || balls[i].xPointer - balls[i].radius <= 0) {
                balls[i].x = balls[i].x * -1;
            }
            //碰撞檢測 Y軸方向
            if (balls[i].yPointer + balls[i].radius >= canvas.height || balls[i].yPointer - balls[i].radius <= 0) {
                balls[i].y = balls[i].y * -1;
            }
        }
        }

5，繪制小球和小球之間的連線

//小球之間連線
        function drawLine(balls, ctx) {
            for (var i = 0; i < balls.length; i++) {
                    for (var j = 0; j < balls.length; j++) {
                        var xx = Math.pow((balls[i].xPointer - balls[j].xPointer), 2);
                        var yy = Math.pow((balls[i].yPointer - balls[j].yPointer), 2);
                        var zz = Math.sqrt(xx + yy);
                        //判斷兩個小球如果之間距離在20到100之間，就繪制一條直線
                        if (zz <= 100&&zz>=20) {
                            console.log(zz)
                            ctx.save();
                            ctx.beginPath();
                            ctx.strokeStyle="#999999";
                            ctx.lineWidth=0.1;
                            // ctx.strokeStyle= "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
                            ctx.moveTo(ballList[i].xPointer, balls[i].yPointer);
                            ctx.lineTo(ballList[j].xPointer,balls[j].yPointer);
                            ctx.closePath();
                            ctx.stroke();
                            ctx.restore();
                        }
                   }
            }
        }

6，運行。

(function(){
       initBall();//生成小球
       //計時器
       setInterval(function() {
           draw(ctx);//繪制
           update(balls, ctx);//修改小球狀態
           drawLine(balls, ctx);//畫線
       }, 24)

 })();
其它

canvas 之星空動畫