HTML5实现一个能够移动的小坦克代码分享-创新互联
这篇文章主要介绍“HTML5实现一个能够移动的小坦克代码分享”，在日常操作中，相信很多人在HTML5实现一个能够移动的小坦克代码分享问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML5实现一个能够移动的小坦克代码分享”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联服务项目包括台江网站建设、
台江网站制作、台江网页制作以及台江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
台江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到台江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
代码如下:
您的浏览器不支持canvas标签
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();
}
