首页 > 代码库 > 利用canvas制作乱跑的小球

利用canvas制作乱跑的小球

2024-08-30 03:52:58   220人阅读

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>
<style></style>

利用canvas制作乱跑的小球


联系
我们