今天是個(gè)特殊的日子，圣誕節(jié)，也是周末，在這里先祝大家圣誕快樂！喜慶的日子，我們可以稍微放松一下，扯一扯昨天雷霆對(duì)戰(zhàn)凱爾特人的比賽，這場(chǎng)比賽大威少又雙叒叕拿下三雙，而且是一個(gè)45+11+11的超級(jí)三雙，其實(shí)小托馬斯的表現(xiàn)也不遑多讓，拿下31分9個(gè)助攻，末節(jié)一開始便帶隊(duì)打出一波小高潮反超比分，無奈威少爺最后幾分鐘暴走直接帶走比賽，讓人直呼精彩。好了，扯完之后我們進(jìn)入正題。
今天給大家?guī)淼氖且粋€(gè)比較好玩的東西——H5坦克大戰(zhàn)。這個(gè)東西的實(shí)現(xiàn)主要用到了H5的canvas以及原生的js，如果你已經(jīng)是大牛，那筆者建議現(xiàn)在開始可以隔五行一看，畢竟筆者也才入行不久還在奔往大牛村的路上，如果你是個(gè)新手基礎(chǔ)薄弱，那么也請(qǐng)不要離開，筆者會(huì)很啰嗦，盡量寫成初學(xué)者也看得懂的代碼（哈哈如此心機(jī)的一個(gè)伏筆，誰還敢說代碼水平不夠！）。
1. 首先做出繪圖區(qū)，作為坦克的戰(zhàn)場(chǎng)
<canvas id="floor" width="800px" height="500px"></canvas>
我們給一個(gè)黑色的背景色，并且讓它居中（如果對(duì)居中的各種奇淫技巧感興趣，歡迎訪問我的第一篇博客——“CSS垂直居中的11種實(shí)現(xiàn)方式”，點(diǎn)擊這里進(jìn)行傳送 http://www.cnblogs.com/zhouhuan/p/vertical_center.html）。
#floor {
background:#000;
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
}
結(jié)果如下：
這里要說明一下，對(duì)于canvas畫布，寫在樣式里的寬高和寫在屬性里的寬高是不等價(jià)的，寫在樣式里的寬高是實(shí)際顯示在頁面里的像素寬高，而寫在屬性里的寬高是context的環(huán)境寬高（有些小伙伴可能暫時(shí)對(duì)context還沒有概念，沒關(guān)系，這里如果不能理解可以暫時(shí)先這樣做，跟著筆者的思路走，待會(huì)講了context之后再回來自己試一下便會(huì)有所體會(huì)），這二者的默認(rèn)值都是300px 150px，如果將樣式的寬高改為800px 500px，那么其實(shí)是相當(dāng)于將context環(huán)境內(nèi)的300px 150px畫在了現(xiàn)實(shí)中的800px 500px，會(huì)導(dǎo)致畫的東西變得模糊，并且可能出現(xiàn)變形，所以一般要保持樣式寬高與屬性寬高
