canvas 之星空动画

Posted 2020-10-07

最近看到位博主的博客背景图很是炫酷，查找下资料了解是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)

 })();
其它