Fork me on GitHub

利用canvas制作乱跑的小球

canvas制作乱跑的小球

说明：将下面的代码放到html的body就可以，键盘控制上(W)下(S)左(A)右(D)  

<body>
    <canvas id="canvas" style="border: 1px solid #000;display: block;margin:30px auto;"></canvas>
    <script type="text/javascript">
        var myCanvas=document.getElementById('canvas');
        myCanvas.height="500";//背景为500*500
        myCanvas.width="500";
        var ctx=myCanvas.getContext("2d");
        //键盘事件
        document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            var x=0,y=0;
            // 上按W
            if(e && e.keyCode==87){ 
                ctx.clearRect(x-11,y-11,22,22);
                y-=10;
                ctx.translate(x,y);
                ctx.beginPath();
                ctx.arc(0,0,10,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
                ctx.restore();
                };
             // 左按A
            if(e && e.keyCode==65){
                ctx.clearRect(x-11,y-11,22,22);
                x-=10;
                ctx.translate(x,y);
                ctx.beginPath();
                ctx.arc(0,0,10,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
                ctx.restore();
               } ; 
             // 下按S
            if(e && e.keyCode==83){
                ctx.clearRect(x-11,y-11,22,22);
                y=10;
                ctx.translate(x,y);
                ctx.beginPath();
                ctx.arc(0,0,10,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
                ctx.restore();
            }
            // 右按D
            if(e && e.keyCode==68){ 
                ctx.clearRect(x-11,y-11,22,22);
                x=10;
                ctx.translate(x,y);
                ctx.beginPath();
                ctx.arc(0,0,10,0,Math.PI*2);
                ctx.fill();
                ctx.closePath();
                ctx.restore();
            }
        }; 
    </script>
</body>
posted @ 2016-12-30 17:34  宏岩翼佬  阅读(447)  评论(0)  编辑  收藏  举报