具体步骤如下:
 
  1. 首先做出绘图区,作为坦克的战场
 
<canvas id="floor" width="800px" height="500px"></canvas>
  我们给一个黑色的背景色,并且让它居中(如果对居中的各种奇淫技巧感兴趣,欢迎访问我的第一篇博客——“CSS垂直居中的11种实现方式”,点击这里进行传送 http://www.cnblogs.com/zhouhuan/p/vertical_center.html)。
 
#floor {
background:#000;
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
}
  结果如下:

  这里要说明一下,对于canvas画布,写在样式里的宽高和写在属性里的宽高是不等价的,写在样式里的宽高是实际显示在页面里的像素宽高,而写在属性里的宽高是context的环境宽高(有些小伙伴可能暂时对context还没有概念,没关系,这里如果不能理解可以暂时先这样做,跟着笔者的思路走,待会讲了context之后再回来自己试一下便会有所体会),这二者的默认值都是300px 150px,如果将样式的宽高改为800px 500px,那么其实是相当于将context环境内的300px 150px画在了现实中的800px 500px,会导致画的东西变得模糊,并且可能出现变形,所以一般要保持样式宽高与属性宽高的一致,其实一般做的话设置个属性宽高确定一下画布的大小就可以了。
  

  2. 接下来就要在画布上绘制图形了
  canvas元素自身是没有绘图能力的,所有的绘制工作必须通过JavaScript来完成。
  ① 这里我们先给出一个画直线的demo,然后做以解释:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.strokeStyle = '#fff';
cxt.stroke();

  结果如下:

  第一步,var myCanvas = document.getElementById('floor'); 这个大家应该都明白,拿到canvas元素,拿到canvas元素是因为第二步里需要使用到它。

      第二步,var cxt = myCanvas.getContext('2d'); 这一步的作用是创建一个在绘图区作图的环境(我一般形象地理解为在当前画布上创建一个画笔),文档里的定义是:getContext()方法返回一个用于在画布上绘图的环境。我们来看看文档里进一步的解释:该方法里的参数指定了想要在画布上绘制的类型,当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API,在未来,如果 <canvas> 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 "3d" 字符串参数。getContext()方法返回的是一个 CanvasRenderingContext2D 对象,使用它可以绘制图形到 Canvas 元素中。
  第三步,cxt.moveTo(50,50); 这一步就已经开始在画直线了,moveTo()方法用于设置当前位置(50,50)并开始一条新的子路径。
  第四步,cxt.lineTo(50,200); 为当前的子路径添加一条直线线段。这里的解释可能有点绕,大家看单词的字面意思可能会更清楚些:moveTo就是将子路径的起点移到某个位置,lineTo就是子路径要一直达到某个位置那当然就是终点咯。
  第五步,cxt.strokeStyle = '#fff'; 设置画笔的颜色为白色,这里没有多余要解释的地方。
  第六步,cxt.stroke(); 按照前几步的设置来绘制一条直线,这一步也比较好理解。
  OK,那到这一步,我们的第一条直线便绘制成功了!撒花撒花!
 
  ② 接下来,我们再看一个画三角形的例子,仍然是先给出代码和结果,再来给大家解释:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.lineTo(200,200);
cxt.closePath();
cxt.strokeStyle = '#fff';
cxt.stroke();

  结果如下:

  这里只有beginPath()和closePath()前面没有用到过。
  beginPath()方法:丢弃任何当前定义的路径并且开始一条新的路径;
  closePath()方法:如果画布的子路径是打开的,那么closePath()方法通过添加一条线段连接当前点和子路径起始点来关闭它,但如果子路径已经闭合,该方法便不做任何事情。一旦子路径闭合,就不能再为其添加更多的直线或曲线了。
  上面的代码也可以修改成这样:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,200);
cxt.lineTo(200,200);
cxt.closePath();
cxt.fillStyle = '#fff';
cxt.fill();

  结果便是:

  fillStyle属性类似于前面用到过的strokeStyle,用来修改填充的颜色,这两者的默认值都是黑色;
  fill()方法用来填充当前路径的内部,也非常好理解,因为fill就是填充的意思。
 
  ③ 第三个例子是画矩形
  这里当然也可以像我们之前画三角形一样,自己一步一步地设置路径,设置好之后再画或者进行填充,但这种方法比较麻烦,也容易出错,不建议使用。CanvasRenderingContext2D对象有一个直接用来画矩形的方法,fillRect()和strokeRect():
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.strokeStyle = "#fff";
cxt.strokeRect(20,20,50,100);
cxt.fillStyle = "#fff";
cxt.fillRect(80,20,50,100);

  这两个方法都有四个参数(x, y, width, height),前两个是矩形左上角点的坐标,后两个是矩形的宽和高。
  
  ④ 画圆
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "orange";
//第一个半圆
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI,true);
cxt.closePath();
cxt.fill();
//圆
cxt.beginPath();
cxt.arc(210,100,50,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//第二个半圆
cxt.strokeStyle = "red";
cxt.beginPath();
cxt.arc(320,100,50,0,Math.PI,false);
cxt.closePath();
cxt.stroke();

  结果如下:

  arc()方法使用一个中心点和半径,为当前子路径添加一条弧,该方法传六个参数(x, y, radius, startAngle, endAngle, counterclockwise),分别表示圆心的x坐标,圆心的y坐标,圆的半径,开始的角度,结束的角度,顺时针还是逆时针。其中,两个角度采用弧度来衡量,最后一个参数true表示逆时针,false表示顺时针。
  这里给大家一个建议,在arc()方法之前加上beginPath(0开始路径,方法之后加上closePath()结束路径,否则可能会出现和其他图形互相影响的情况。画其它图形的时候也是,要注意这一点,只有矩形不用。
  关于角度的参数有几点说明:默认X轴正半轴的角度为0,沿着逆时针方向角度增加。上面使用到的Math.PI表示的就是数学当中的π,Math对象是ECMAScript为保存数学公式和信息提供的一个对象,该对象还有其它很多属性用起来也非常方便,比如Math.E表示自然对数的底数,也就是常量e的值。
 
  ⑤ 在画布上写字
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#F21C9D";
cxt.font = "50px simhei";
cxt.fillText("圣诞快乐!",30,100);

  结果:

  fillText()方法用来在画布上写字,第一个参数传一个字符串,后两个参数便是左上角点的坐标;
  cxt.fillStyle用来给字体设置颜色;
  cxt.font用来设置大小和字体,大小的值和字体的值之间用空格隔开,二者只写一个时无效。
 
  ⑥ 画图片
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
var myImg = new Image();
myImg.src = "images/soldier.png";
myImg.onload = function(){
cxt.drawImage(myImg,60,20,680,454);
};

  结果如下:

  画图片有几个步骤:
  var myImg = new Image(); 创建image对象;
  myImg.src = "images/soldier.png"; 指定图片的路径;
  myImg.onload = function(){

    cxt.drawImage(myImg,60,20,680,454);
  };
  加载完图片之后,使用drawImage()方法进行绘制,该方法传四个参数(x, y, width, height),分别为图片左上角的X坐标,Y坐标,图片的宽,图片的高,宽和高也可以不指定,不指定的话就会显示为图片的原始尺寸。
 
  3. 掌握了这些方法之后,我们就可以轻而易举地画出一个简单的坦克了,我们来以湖人队的主色画一个坦克:
var myCanvas = document.getElementById('floor');
var cxt = myCanvas.getContext('2d');
cxt.fillStyle = "#542174";
cxt.fillRect(350,400,20,65); //坦克左边的履带
cxt.fillRect(420,400,20,65); //右边的履带
cxt.fillRect(373,410,44,50); //中间的主体
cxt.fillStyle = "#FCB827";
cxt.beginPath();
cxt.arc(395,435,16,0,2*Math.PI,false); //主体上的圆盖
cxt.closePath();
cxt.fill();
cxt.strokeStyle = "#FCB827";
cxt.lineWidth = "8.0";
cxt.moveTo(395,435); //炮筒起点
cxt.lineTo(395,375); //炮筒终点
cxt.stroke(); //画炮筒
  结果如下:

  lineWidth属性用来设置画笔画出的线条宽度,默认值是1.0,设置的值必须大于0,较宽的线条在路径上居中,每边占线条宽度的一半。
  这里说明一下为什么不画一张坦克的图片上去,而要这样费尽周折结果还画了一个巨丑的坦克,这是因为如果直接使用图片的话会很耗CPU,性能不高,坦克跑起来的时候甚至可能会出现卡顿,但如果是自己画的坦克就不会有这样的问题。
  (注:暂未考虑对低版本IE及其它非主流浏览器的兼容) 

使用H5 canvas画一个坦克的更多相关文章

  1. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. H5 canvas建造敌人坦克

      接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame3.html),这一篇建造敌人的坦克. 思路是,基于可扩展性和性能等方面的考虑,用构造函数改造 ...

  3. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  4. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  5. 用canvas画一个的小画板(PC端移动端都能用)

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 手对手的教你用canvas画一个简单的海报

    啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...

  8. 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  9. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. Hive JOIN使用详解

    转自http://shiyanjun.cn/archives/588.html Hive是基于Hadoop平台的,它提供了类似SQL一样的查询语言HQL.有了Hive,如果使用过SQL语言,并且不理解 ...

  2. Floyd算法并输出路径

    hdu1224 Free DIY Tour Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  3. Feature Tools 简介

    FeatureTools是2017年9月上线的github项目,是一个自动生成特征的工具,应用于关系型数据. github链接:https://github.com/Featuretools/feat ...

  4. Session的存储原理

    一.session是怎么存储,提取的? 1.在服务器端有一个session池,用来存储每个用户提交session中的数据,Session对于每一个客户端(或者说浏览器实例)是“人手一份”,用户首次与W ...

  5. HDU 1104 Remainder(BFS 同余定理)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1104 在做这道题目一定要对同余定理有足够的了解,所以对这道题目对同余定理进行总结 首先要明白计算机里的 ...

  6. Java web项目配置相关

    引申 XML 命名空间(XML Namespaces) XML Schema 教程 XSD(XML Schema Definition) XML Schema 语言也称作 XML Schema 定义. ...

  7. With all Java versions it is strongly recommended to not use experimental -XX JVM options.

    https://lucene.apache.org/solr/7_6_0//SYSTEM_REQUIREMENTS.html System Requirements Apache Solr runs ...

  8. 小米范工具系列之二:小米范 web目录扫描器

    最新版本1.1,下载地址:http://pan.baidu.com/s/1c1NDSVe  文件名scandir,请使用java1.8运行 小米范web目录扫描器主要功能是探测web可能存在的目录及文 ...

  9. 【Loadrunner】如何通过loadrunner利用代理对手机端Web浏览器及APP进行录制?

    以下为作者操作并最终可以成功录制脚本并调试成功的方法实际操作中记录截图,都是干货哦~ 1.安装lr11补丁 百度网盘下载链接:https://pan.baidu.com/s/1TPoaAMYvi1cw ...

  10. 【Loadrunner】通过loadrunner录制时候有事件但是白页无法出来登录页怎么办?

    loadrunner录制脚本时候有事件但是一直白页怎么办? 解决办法:依次进行下方1.2.方法操作,如果还不行再进行3的操作. 1.勾选下图IE浏览器的Internet选项中“启用第三方浏览器拓展*” ...