canvas画小球碰壁反弹

最新推荐文章于 2024-12-05 22:57:09 发布

原创最新推荐文章于 2024-12-05 22:57:09 发布 · 528 阅读

1 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #cvs{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="600"></canvas>
    <script>
        var vac = document.getElementById("cvs")
		var ctx = vac.getContext('2d')
        
        var x=0,y=0,l=true,t=true;
        function move(){
            ctx.clearRect(0,0,vac.width,vac.height)
            //x轴反弹
            if(l){
                x++;
                if(x>vac.width-50){
                    l=false
                }
            }else{
                x--;
                if(x<0){
                    l=true
                }
            }
            //y轴反弹
             if(t){
                y++;
                if(y>vac.height-50){
                    t=false
                }
            }else{
                y--;
                if(y<0){
                    t=true
                }
            }

            ctx.beginPath();
            ctx.fillStyle="red";
            ctx.fillRect(x,y,50,50)
            ctx.closePath()
        }
        
        setInterval(move,1)


    </script>
</body>
</html>