05-html5游戏坦克大战第一战（在画布上面画出坦克）

最新推荐文章于 2021-02-25 07:19:07 发布

会编程的阿强

最新推荐文章于 2021-02-25 07:19:07 发布

阅读量2k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/9327739

版权

Html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--让浏览器指到这是一个html网页-->
<!DOCTYPE HTML>
<html>
 <head>
  <title>坦克大战 </title>
  <!--网页的编码-->
  <meta charset="GBK"/>
 </head>

 <body>
 <h1>html5经典坦克大战</h1>
  <!--创建一个画布,坦克大战的战场-->
  <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
  <script type="text/javascript">
  //得到画布
  var canvas1=document.getElementById("tankMap");
  //得到画笔
  var cxt=canvas1.getContext("2d");
  //画出自己的坦克
  //我的坦克
  var heroX=130;
  var heroY=30;
  //设置齿轮的颜色
  cxt.fillStyle="#DeD284";
  //画出左边矩形
  cxt.fillRect(heroX,heroY,5,30);
  //画出右边矩形
  cxt.fillRect(heroX+15,heroY,5,30);
  //画出中间矩形
  cxt.fillRect(heroX+6,heroY+5,8,20);
  //画出坦克盖子
	cxt.fillStyle="#FFD972";
	cxt.arc(heroX+10,heroY+15,4,0,360,true);
	cxt.fill();
  //画出炮筒
  //设置炮筒的颜色
  cxt.strokeStyle="#FFD972";
  //设置线条的宽度
  cxt.lineWidth=1.5;
  cxt.beginPath();
  cxt.moveTo(heroX+10,heroY+15);
  cxt.lineTo(heroX+10,heroY);
  cxt.closePath();
  cxt.stroke();
  </script>
 </body>
</html>