来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] HTML5一词想必大家早已如雷贯耳，其功能很强大，本文为大家介绍下通过其实现一个能够移动的小坦克，具体如下，喜欢HTML的朋友可以参考下...
|
HTML5一词想必大家早已如雷贯耳，其功能很强大，本文为大家介绍下通过其实现一个能够移动的小坦克，具体如下，喜欢HTML的朋友可以参考下
复制代码 代码如下:<!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> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
