HTML5｜使用Canvas API画图实现绘制坦克图案
HTML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图：
- 使用Canvas API动态地绘制各种效果精美的图形；
- 绘制可伸缩矢量图形（SVG）。
借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第5章介绍使用Canvas API画图的方法，游戏开发中主要使用Canvas API画图来实现游戏界面。
【例】要使用Canvas API画图实现绘制坦克图案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px"height="300px"style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
varcanvas1 = document.getElementById("tankMap");
//定义一个位置变量
var heroX= 80; var heroY = 80;
//得到绘图上下文
var cxt =canvas1.getContext("2d");
//设置颜色
cxt.fillStyle="#BA9658";
//左边的矩形
cxt.fillRect(heroX,heroY,5,30);
//右边的矩形
cxt.fillRect(heroX+17,heroY,5,30);
//画中间的矩形
cxt.fillRect(heroX+6,heroY+5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E";
cxt.arc(heroX+11,heroY+15,5,0,360,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle="#FEF26E";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(heroX+11,heroY+15);
cxt.lineTo(heroX+11,heroY);
cxt.closePath();
cxt.stroke();
</script>
</body>
</html>
浏览网页效果如图1-5所示。
