使用html5画出一个简单的坦克

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5经典的坦克大战</h1>
<canvas id="tankMap" height="400px" width="500px" style="background-color:black"></canvas>

<script type="text/javascript">
	//1.得到画布
	var canvas1 = document.getElementById("tankMap");
	//2.得到绘图的上下文(画笔)
	var cxt = canvas1.getContext("2d");
	
	//坦克坐标
	var myTankX = 230;
	var myTankY = 230;
	
	//控制坦克宽度
	var tank_width = 5;
	
	//画出自己的坦克
	//设置颜色
	cxt.fillStyle="#DED284";
	//先画出左边的矩形(左轮子)
	cxt.fillRect(myTankX,myTankY,5,30);
	//画出右边的矩形(右轮子)
	cxt.fillRect(myTankX+15+tank_width,myTankY,5,30);
	//画出中间的矩形(身体)
	cxt.fillRect(myTankX+6,myTankY+5,8+tank_width,20);
	//画出圆(坦克的盖子)
	cxt.fillStyle="#FFCF31";
	cxt.arc(myTankX+10+tank_width/2,myTankY+15,4+tank_width/2,0,2*Math.PI,true);
	cxt.fill();
	//画出直线(炮筒)
	cxt.strokeStyle="#FFCF31";
	//设置线条的宽度
	cxt.lineWidth=2;
	cxt.beginPath();
	cxt.moveTo(myTankX+10+tank_width/2,myTankY+15);
	cxt.lineTo(myTankX+10+tank_width/2,myTankY-5);
	cxt.closePath();
	cxt.stroke();
</script>
</body>
</html>


你可能感兴趣的:(使用html5画出一个简单的坦克)