<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> </head>
<body>
<canvas id="tankMap" width="400px" height="300px" style="background-color: black"></canvas>
<script type="text/javascript"> var heroX = ;
var heroY = ;
//得到画布
var canvas1 = document.getElementById("tankMap");
//取得画布画笔对象
var cxt = canvas1.getContext("2d");
//画出坦克
cxt.fillStyle = "#DED284";
//画出左面
cxt.fillRect(heroX, heroY, , );
//画出右边
cxt.fillRect(heroX + , heroY, , );
//中间矩形
cxt.fillRect(heroX + , heroY + , , );
//画出坦克的盖子
cxt.fillStyle = "#FFD972";
cxt.arc(heroX + , heroY + , , , , true);
cxt.fill();
//车出炮线
cxt.strokeStyle = "#FFD972";
cxt.lineWidth = 1.5;
cxt.beginPath();
cxt.moveTo(heroX + , heroY + );
cxt.lineTo(heroX + , heroY);
cxt.closePath();
cxt.stroke(); </script>
</body>
</html>
//效果图如下