canvas绘制跳动的小球

398 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画反弹</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
canvas1{
            box-shadow: 0px 0px 10px red;
            position: absolute;
            left:50px;
            top: 50px;
        }

    </style>
</head>
<body>
    <canvas id="canvas1" width="700px" height="700px">
        <p>你的浏览器有待升级</p>
    </canvas>

</body>
<script type="text/javascript">

    //1.获取元素
    var canvas = document.getElementById("canvas1");

    //2.绘制环境
    var context = canvas.getContext("2d");

    function round(x,y,r,color,speedx,speedy) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;
        this.speedx = speedx;
        this.speedy = speedy;

        //绘制
        this.draw = function () {
            context.beginPath();
            context.fillStyle = this.color;
            context.arc(this.x,this.y,this.r,0,Math.PI*2,true);
            context.fill();
        }
        //动画
        this.move = function () {
            if(this.x>canvas.width-2*this.rthis.x-this.r<0){
                this.speedx *= -1;//条件范围u内运动反弹
            }
            if(this.y>canvas.height-2*this.rthis.y-this.r<0){
                this.speedy *= -1;
            }
            this.x += this.speedx;
            this.y += this.speedy;
        }
    }

    //许多球的绘制
    var arr = [];
    for(var i=0;i<333;i++){
       var x = rand(30,470);
        var y = rand(30,470);
        var r = rand(7,22);
        var speedx = rand(1,7);
        var speedy = rand(2,8);
        var color="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
        var rounds = new round(x,y,r,color,speedx,speedy);
        arr.push(rounds);
    }
    //得到了10个不同样式的小球,并将其存放在数组里
    function ani() {
        context.clearRect(0,0,canvas.width,canvas.height);
        //将数组里的小球分别进行绘制在画布中
        for(var i=0;i<arr.length;i++){
             arr[i].draw();
            arr[i].move();
        }
        window.requestAnimationFrame(ani);//定时器也可以。在这里确保运动更流畅
    }
    ani();

    //随机函数
    function rand(min,max) {
        return  parseInt(Math.random()*(max-min)+min);
    }
</script>
</html>