您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
canvas移动小方块案例
点击数:1547  发布时间2018-07-10 22:30:10

<html>

    <head>
        <title>Dragging</title>
        <style>
        #cans{margin:150px;}
        </style>
    </head>
    <body>
        <canvas id="cans" width="400" height="400"></canvas>

        <script type="text/javascript">
            cav=document.getElementById("cans");
            ctx=cav.getContext("2d");

            var ball={
                x:100,
                y:100,
                sp:2
            }

            ball.draw=function(){
                ctx.fillRect(this.x,this.y,20,20);
            }

            ball.move=function(){
                this.x-=this.sp;
                this.y-=this.sp;
            }

            setInterval(function(){
                ctx.clearRect(0,0,400,400)
                ball.draw()
                ball.move()
            },30)

        </script>

    </body>
</html>
来源:咸宁网站建设