<!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>
转载于:https://my.oschina.net/shuming/blog/619991