HTML5 | 使用Canvas API画图实现绘制坦克图案

2018年7月14日 280点热度 0人点赞 0条评论

图片


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-

【关于书圈微店】

【官方正版 社内直邮】

提供全网最低价格的最新计算机图书

免运费,可开发票

购买图书的读者还可以获得额外赠送的超丰富的学习资源(案例,视频等)

【书圈微店入口】

❤ 关注“书圈”公众号,在主界面点击“购书”,即可进入书圈微店

❤识别下方二维码也可进入

图片

【本期活动——每天一本5折书】

  • 活动时间:7月15日12:00至7月21日12:00,每天中午12:00发售

  • 活动规则:每天中午12:00,《HTML5 网页游戏设计从基础到开发》半价销售,每天仅一本,售完为止。

  • 提示:本商品保证全新正版,不支持退货,不支持开发票,免运费。两个工作日内发书。

    图片长按上面图片,识别二维码即可


66170HTML5 | 使用Canvas API画图实现绘制坦克图案

这个人很懒,什么都没留下

文章评论