html5 滚动小球

<html>
 <head>
  <meta charset="utf-8"/>
 </head>
 <body onkeydown="keydown()">
  <canvas id="tankmap" width="500px" height="300px" style="background-color:black"></canvas>
 </body>
</html>
<script>
   var arcx=30;
   var arcy=30;
   var canvas=document.getElementById("tankmap");
   canvas.width=window.screen.width;
   canvas.height=window.screen.height;
   var cxt= canvas.getContext("2d");
   drawball();
   function drawball(){
   cxt.beginPath();
   cxt.fillStyle="#BA9658"
   cxt.arc(arcx,arcy,10,0,360,true);
   cxt.closePath();
   cxt.fill();
   }

   function keydown(){
	   //alert(event.keyCode);
	   cxt.clearRect(0,0,window.screen.width,window.screen.height);
	   arcx++;
	   arcy++;
	   drawball();
   }
</script>

posted on 2013-11-14 21:51 larryle 阅读(348) 评论(0) 编辑收藏举报