HTML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图：
-
使用Canvas API动态地绘制各种效果精美的图形；
-
绘制可伸缩矢量图形（SVG）。
借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第5章介绍使用Canvas API画图的方法，游戏开发中主要使用Canvas API画图来实现游戏界面。
【例1-4】要使用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所示。
-END-
【官方正版 社内直邮】
提供全网最低价格的最新计算机图书
免运费，可开发票
购买图书的读者还可以获得额外赠送的超丰富的学习资源（案例，视频等）
【书圈微店入口】
❤ 关注“书圈”公众号，在主界面点击“购书”，即可进入书圈微店
❤识别下方二维码也可进入
-
活动时间：7月15日12:00至7月21日12:00，每天中午12:00发售
-
活动规则：每天中午12：00，《HTML5 网页游戏设计从基础到开发》半价销售，每天仅一本，售完为止。
-
提示：本商品保证全新正版，不支持退货，不支持开发票，免运费。两个工作日内发书。
长按上面图片,识别二维码即可
文章评论