代碼如下:
<!doctype html>
<html>
<head>
</head>
<body onkeydown=changedirect()>
<canvas id=tankmap width=500px height=300px style=border:1px solid #d3d3d3;>您的瀏覽器不支持canvas標(biāo)簽</canvas>
<script type=text/javascript>
var canvas1=document.getelementbyid('tankmap');
var ctx=canvas1.getcontext('2d');
var myx=30;
var myy=30;
function drawball(){
ctx.shadowblur=30,ctx.shadowcolor=#008c46;
ctx.fillstyle='#008c46';
ctx.fillrect(myx,myy,5,30);
ctx.fillrect(myx+17,myy,5,30);
ctx.fillrect(myx+6,myy+5,10,20);
ctx.beginpath();
ctx.fillstyle='#004020';
ctx.arc(myx+11,myy+15,5,0,math.pi*1.5);
ctx.closepath();
ctx.fill();
ctx.strokstyle=#008c46;
ctx.moveto(myx+11,myy+15);
ctx.lineto(myx+11,myy-5);
ctx.stroke();
}
drawball();
function changedirect(){
var code=event.keycode;
switch(code){
case 87:
myy--;
break;
case 68:
myx++;
break;
case 83:
myy++;
break;
case 65:
myx--;
break;
}
ctx.clearrect(0,0,500,300);
//重新繪制
drawball();
}
</script>
</body>
</html>