| 标题 | 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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。