<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body onkeydown="test()"> <h1>小球上下移动</h1> <canvas id="test" width="400px" height="300px" style="background-color: black"></canvas> <script type="text/javascript"> //得到画布 var canvas1 = document.getElementById("test"); //取得画布画笔对象 var cxt = canvas1.getContext("2d"); //画出红色圆球 cxt.beginPath(); cxt.fillStyle = "#FF0000"; cxt.arc(30, 30, 10, 0, 360, true); cxt.closePath(); cxt.fill(); //键盘发生事件 让小球移动 w d s a //按下一个键，实际上触发一个onkeydow事件 var ballX = 30; var bally = 30; function test() { cxt.clearRect(0,0,400,300); var code = event.keyCode; switch (code) { case 87: bally--; break; case 68: ballX++; break; case 83: bally++; break; case 65: ballX--; break; } drawBall(); } //重新绘制 function drawBall() { cxt.beginPath(); cxt.fillStyle = "#FF0000"; cxt.arc(ballX, bally, 10, 0, 360, true); cxt.closePath(); cxt.fill(); } </script> </body> </html>