今天是个特殊的日子，圣诞节，也是周末，在这里先祝大家圣诞快乐！喜庆的日子，我们可以稍微放松一下，扯一扯昨天雷霆对战凯尔特人的比赛，这场比赛大威少又双叒叕拿下三双，而且是一个45+11+11的超级三双，其实小托马斯的表现也不遑多让，拿下31分9个助攻，末节一开始便带队打出一波小高潮反超比分，无奈威少爷最后几分钟暴走直接带走比赛，让人直呼精彩。好了，扯完之后我们进入正题。
今天给大家带来的是一个比较好玩的东西——H5坦克大战。这个东西的实现主要用到了H5的canvas以及原生的js，如果你已经是大牛，那笔者建议现在开始可以隔五行一看，毕竟笔者也才入行不久还在奔往大牛村的路上，如果你是个新手基础薄弱，那么也请不要离开，笔者会很啰嗦，尽量写成初学者也看得懂的代码（哈哈如此心机的一个伏笔，谁还敢说代码水平不够！）。
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，会导致画的东西变得模糊，并且可能出现变形，所以一般要保持样式宽高与属性宽高
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式