今天是個特殊的日子，圣誕節(jié)，也是周末，在這里先祝大家圣誕快樂！喜慶的日子，我們可以稍微放松一下，扯一扯昨天雷霆對戰(zhàn)凱爾特人的比賽，這場比賽大威少又雙叒叕拿下三雙，而且是一個45+11+11的超級三雙，其實小托馬斯的表現(xiàn)也不遑多讓，拿下31分9個助攻，末節(jié)一開始便帶隊打出一波小高潮反超比分，無奈威少爺最后幾分鐘暴走直接帶走比賽，讓人直呼精彩。好了，扯完之后我們進(jìn)入正題。

　　今天給大家?guī)淼氖且粋€比較好玩的東西——H5坦克大戰(zhàn)。這個東西的實現(xiàn)主要用到了H5的canvas以及原生的js，如果你已經(jīng)是大牛，那筆者建議現(xiàn)在開始可以隔五行一看，畢竟筆者也才入行不久還在奔往大牛村的路上，如果你是個新手基礎(chǔ)薄弱，那么也請不要離開，筆者會很啰嗦，盡量寫成初學(xué)者也看得懂的代碼（哈哈如此心機的一個伏筆，誰還敢說代碼水平不夠?。?。

　　

　　1. 首先做出繪圖區(qū)，作為坦克的戰(zhàn)場

 

<canvas id="floor" width="800px" height="500px"></canvas>

　　我們給一個黑色的背景色，并且讓它居中（如果對居中的各種奇淫技巧感興趣，歡迎訪問我的第一篇博客——“CSS垂直居中的11種實現(xiàn)方式”，點擊這里進(jìn)行傳送 http://www.cnblogs.com/zhouhuan/p/vertical_center.html）。

 

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

#floor {
    background:#000;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%, -50%);
}

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

　　結(jié)果如下：

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

　　這里要說明一下，對于canvas畫布，寫在樣式里的寬高和寫在屬性里的寬高是不等價的，寫在樣式里的寬高是實際顯示在頁面里的像素寬高，而寫在屬性里的寬高是context的環(huán)境寬高（有些小伙伴可能暫時對context還沒有概念，沒關(guān)系，這里如果不能理解可以暫時先這樣做，跟著筆者的思路走，待會講了context之后再回來自己試一下便會有所體會），這二者的默認(rèn)值都是300px 150px，如果將樣式的寬高改為800px 500px，那么其實是相當(dāng)于將context環(huán)境內(nèi)的300px 150px畫在了現(xiàn)實中的800px 500px，會導(dǎo)致畫的東西變得模糊，并且可能出現(xiàn)變形，所以一般要保持樣式寬高與屬性寬高