东软JavaWeb实训记-DAY9-小组项目开发实践（仿知乎首页登录页canvas小球特效）

注：此部分非实训内容，为自己添加内容。

全部代码（拷走建个html即可运行）：

代码来源：http://blog.csdn.net/llx18042693031/article/details/51475332

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <canvas id="canvas" width="1500" height="1000" style="border: 1px solid red;"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');

        function rand(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }

        function Round() {
            //随机大小
            this.r = rand(5, 20);
            //随机位置
            var x = rand(0,canvas.width - this.r);//仿制超出右边界
            this.x = x<this.r ? this.r:x;
            var y = rand(0,canvas.height - this.r);
            this.y = y<this.r ? this.r:y;
            //随机速度
            var speed = rand(1, 3);
            this.speedX = rand(0, 4) > 2 ? speed : -speed;
            this.speedY = rand(0, 4) > 2 ? speed : -speed;

        }
        Round.prototype.draw = function() {
                    ctx.fillStyle = 'rgba(200,200,200,0.5)';
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
                    ctx.closePath();
                    ctx.fill();
                }
            Round.prototype.links = function(){
                for (var i=0;i<ballobj.length;i++) {
//                  var ball = ballobj[i];
                    var l = Math.sqrt((ballobj[i].x - this.x)*(ballobj[i].x - this.x)+(ballobj[i].y - this.y)*(ballobj[i].y - this.y));
                    var a = 1/l *100;
                    if(l<250){
                    ctx.beginPath();
                    ctx.moveTo(this.x,this.y);
                    ctx.lineTo(ballobj[i].x,ballobj[i].y);
                    ctx.strokeStyle = 'rgba(200,200,200,'+a+')';
                    ctx.stroke();
                    ctx.closePath();
                    }
            }
            }
            Round.prototype.move = function() {
                this.x += this.speedX/10;
                if (this.x > canvas.width  || this.x < 0) {
                    this.speedX *= -1;
                }
                this.y += this.speedY/10;
                if (this.y > canvas.height  || this.y < 0) {
                    this.speedY *= -1;
                }
            }
        var ballobj = [];

        function init() {
            for (var i = 0; i < 50; i++) { //小球大小
                var obj = new Round();
                obj.draw();
                obj.move();
                ballobj.push(obj);
            }
        }
        init();
        function ballmove(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for (var i=0;i<ballobj.length;i++) {
                var ball = ballobj[i];
                ball.draw();
                ball.move();
                ball.links();
            }
            window.requestAnimationFrame(ballmove);
        }
        ballmove();
    </script>

</html>

东软JavaWeb实训记-DAY9-小组项目开发实践（仿知乎首页登录页canvas小球特效）

猜你喜欢