HTML5 | 使用Canvas API畫圖實現繪製坦克圖案
原標題：HTML5 | 使用Canvas API畫圖實現繪製坦克圖案
HTML4幾乎沒有繪圖的功能，通常只能顯示已有的圖片；而HTML5則集成了強大的繪圖功能。在HTML5中可以通過下面的方法進行繪圖：
- ?使用Canvas API動態地繪製各種效果精美的圖形；
- ?繪製可伸縮矢量圖形（SVG）。
藉助HTML5的繪圖功能，既可以美化網頁界面，也可以實現專業人士的繪圖需求。本書將在第5章介紹使用Canvas API畫圖的方法，遊戲開發中主要使用Canvas API畫圖來實現遊戲界面。
【例1-4】要使用Canvas API畫圖實現繪製坦克圖案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大戰</h1>
<!--坦克大戰的戰場-->
<canvas id="tankMap" width="400px"height="300px"style="background-color:black"></canvas>
< type="text/java">
//得到畫布
varcanvas1 = document.getElementById("tankMap");
//定義一個位置變數
var heroX= 80; var heroY = 80;
//得到繪圖上下文
var cxt =canvas1.getContext("2d");
//設置顏色
cxt.fillStyle="#BA9658";
//左邊的矩形
cxt.fillRect(heroX,heroY,5,30);
//右邊的矩形
cxt.fillRect(heroX+17,heroY,5,30);
//畫中間的矩形
cxt.fillRect(heroX+6,heroY+5,10,20);
//畫出坦克的蓋子
cxt.fillStyle="#FEF26E";
cxt.arc(heroX+11,heroY+15,5,0,360,true);
cxt.fill();
//畫出炮筒
cxt.strokeStyle="#FEF26E";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(heroX+11,heroY+15);
cxt.lineTo(heroX+11,heroY);
cxt.closePath();
cxt.stroke();
</>
</body>
</html>
瀏覽網頁效果如圖1-5所示。
-END-
【關於書圈微店】
【官方正版 社內直郵】
提供全網最低價格的最新計算機圖書
免運費，可開發票
購買圖書的讀者還可以獲得額外贈送的超豐富的學習資源（案例，視頻等）
【書圈微店入口】
? 關注「書圈」公眾號，在主界面點擊「購書」，即可進入書圈微店
TAG:書圈 |