html5 方框内的小球

html5 方框内的小球

版本一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var x=10,y=10,WIDTH,HEIGHT,RADIUS=10;
            canvas=$("#canvas").get(0);
            d=canvas.getContext("2d");
            //小球方向，默认为1，向右下
            var direction=1;
            WIDTH= canvas.width;
            HEIGHT= canvas.height;

            //小球走
            setInterval(function () {
                //1.判断方向，决定小球的横纵坐标
                //2.判断方向变化
                if(direction==1){
//                    右下
                    x++;
                    y++;
                    if(y>=HEIGHT-RADIUS){
                        direction=2;
                    }
                    if(x>=WIDTH-RADIUS){
                        direction=4;
                    }
                }else if(direction==2){
                    //右上
                    x++;
                    y--;
                    if(x>=WIDTH-RADIUS){
                        direction=3;
                    }
                    if(y<=RADIUS){
                        direction=1;
                    }
                }else if(direction==3){
//                    左上
                    x--;
                    y--;
                    if(y<=RADIUS){
                        direction=4;
                    }
                    if(x<=RADIUS){
                        direction=2;
                    }
                }else if(direction==4){
//                    左下
                    x--;
                    y++;
                    if(x<=RADIUS){
                        direction=1;
                    }
                    if(y>=HEIGHT-RADIUS){
                        direction=3;
                    }
                }
                d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
                d.fillStyle="blue";
                d.beginPath(); // 从新开始画，防止 冲突重叠
                d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
                d.closePath(); // 结束画布，防止冲突重叠
                d.fill(); // 结束渲染
            },20);

        });
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>

版本二

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            var x=10,y=10; //  圆坐标
            var WIDTH,HEIGHT,RADIUS=10;
            xx=1;yy=1; // 步长
            canvas=$("#canvas").get(0);
            d=canvas.getContext("2d");
            WIDTH= canvas.width;
            HEIGHT= canvas.height;
            //小球走
            setInterval(function () {
                if(x < RADIUS || x >= WIDTH-RADIUS){   // 一开始坐标就相等了，要去掉=号 x = radius
                    xx *= -1;
                }
                //判断小球纵向边界
                if(y < RADIUS || y >= HEIGHT-RADIUS){
                    yy *= -1;
                }
                x += xx;
                y += yy;
                d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
                d.fillStyle="blue";
                d.beginPath(); // 从新开始画，防止 冲突重叠
                d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
                d.closePath(); // 结束画布，防止冲突重叠
                d.fill(); // 结束渲染
            },20);

        });
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>