MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

建立Canvas並畫出

這是Gamedev Canvas tutorial十個步驟的第一步。你可以這份教學的原始碼,當你完成這份教學你的程式碼應該跟Gamedev-Canvas-workshop/lesson1.html差不多。

在開始撰寫遊戲功能之前,我們先建構在遊戲中負責渲染的基礎結構。渲染可透過HTML的<canvas> 元件完成。

遊戲的HTML

當整個遊戲透過<canvas> 元件渲染時,HTML檔案結構就會相當簡單。用你最喜歡的文字編輯器打開新的HTML檔,將它命名為index.html並存在適當的位置上,再將下面的的程式碼貼到index.html中:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// JavaScript code goes here
</script>

</body>
</html>

在header中設定了文字編碼、以及<title>和一些CSS樣式。在body中包含<canvas><script>,前者將用來渲染遊戲畫面,後者將用來撰寫JavaScript程式控制渲染。<canvas>元件有個id為myCanvas方便當作參考(reference,如許多程式語言中的變數)讓我們設定它的寬度為480 pixels與高度320 pixels,這份教學中全部的JavaScript 程式碼都會寫在<script>開始標記與</script>結束標記中間。

Canvas基礎

為了能夠順利渲染圖形在<canvas>元件中,獲得<canvas>元件的參考。請將下列的程式碼加在<script>開始標記的後面。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

我們將<canvas>元件的參考存成變數canvas為了未來使用。建立ctx變數儲存"2D渲染環境",ctx變數實際拿來繪製Canvas的工具。

以下片段的程式範例在canvas上印出紅色正方形。將以下的程式加在上面J的avaScript程式碼之後,再用瀏覽器打開index.html測試。

ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

所有的指令都介於beginPath()closePath()。我們用rect()定義了一個矩形,rect()中前兩個數值代表左上角的座標。在上面的情況中,矩形距離左邊20 pixels,距離畫面上方40 pixels,50 pixels寬,50 pixels高,形成完美的正方形。fillStyle屬性所儲存的顏色會被fill()方法用來塗滿正方形,在此為塗上紅色。

不僅矩形— 以下的程式碼印出綠色的圓形。試著將程式碼加在JavaScript底部,存檔在重新整理瀏覽器中的index.html:

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();

如同你看到的我們再次使用了beginPath()closePath()。在它們中間最重要的程式碼是arc()arc()用到六個參數(依序介紹):

  • 圓弧中心的x、y座標
  • 圓弧的半徑
  • 圓弧開始和結束的角度(從開始到結束的角度, 以弧度表示)
  • 繪製的方向(false代表順時針方向, 預設或true為逆時針方向) 最後一個參數並非必要

fillStyle看起來與之前不同,原因就像CSS一樣可以用16進位、顏色關鍵字、rgba()函式等其他可用的顏色指定方法。

不但有fill()填滿圖形,還有 stroke() 專門為外輪廓線上色。也試著加入下面的JavaScript程式碼吧:

ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();

上面的程式碼印出藍色邊框的空心矩形,由於在rgba()函式的alpha通道,藍色邊框呈現半透明。

比較你的程式碼

這裡第一課的有全部原始碼,在JSFiddle上實際運行:

Exercise: 練習改變物體的大小和顏色

下一步

現在我們已經設定基本的HTML並且學了一些canvas知識 ,讓我們接著下去第二章實做如何在遊戲中移動球

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, RishYang
 最近更新: jackblackevo,