| 标题 | html5实现一个能够移动的小坦克示例代码 |
| 范文 | 代码如下: <!doctype html> <html> <head> </head> <body onkeydown=changedirect()> <canvas id=tankmap width=500px height=300px style=border:1px solid #d3d3d3;>您的浏览器不支持canvas标签</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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。