上一節我們做好了使用Canvas的準備工作，但並沒有深入的介紹如何使用Canvas，比如怎麼繪製圖形，怎麼做Canvas動畫等。但並不用着急，隨着我們後面的深入學習，這一切都會知道的。在深入學習之前，我們有必要先了解Canvas裏的座標系統。那麼這一節，就先來了解Canvas的座標系統。
笛卡座標系
在數學裏，我們學過一種座標系統，叫作笛卡座標系（Cartesian Coordinate system），這個座標系統也稱爲直角座標系，是一種正交座標系。
二維的直角座標系是由兩條相互垂直、0點重合的數軸構成的。在平面內，任何一點的座標是根據數軸上對應的點的座標設定的。在平面內，任何一點與座標的對應關係，類似於數軸上點與座標的對應關係。
有關於笛卡座標系詳細介紹可以在維基百科中瞭解。
可能你對笛卡座標系有了一定的瞭解，咱們在此基礎上來看一個簡單的示例，比如下圖：
你可以看到，每個點都有一雙與之關聯的值。這些被稱爲座標點，通常表示爲(x,y)。x位於水平軸上，y位於垂直軸上。其中(0,0)點是座標原點。x軸從原點向右方向爲正值，反之爲負值，y軸從原點向上爲正值，反之爲負值。
正如上圖所示，(2,3)表示x = 2，y=3。我們從座標原點，沿x軸向右2格位置處畫一條與y軸平行的線；另外沿y軸向上3格位置處畫一條與x軸平行的線。這兩條線交匯處就是(2, 3)的座標點。
是不是很好理解。
Web中的座標系統
上面是我們印象中的數學座標系統，但在Web頁面中，或者說我們的瀏覽器中也有一個座標系統。只是他和我們數學中的座標系統不一樣。Web的座標系統的原點是在屏幕（瀏覽器屏幕）的左上角。如下圖所示：
同樣的它有兩個座標軸，x軸（水平軸）和y軸（垂直軸）。兩軸的交匯點（左上角）爲座標原點(0,0)。原點沿x軸向右是正值，原點沿y軸向下是正值。
這看上去和笛卡座標有點不一樣。沒有顯式的x軸負值和y軸負值。其實在Web的座標系統中一樣可以使用負座標，只不過有可能會跑到屏幕外面，讓人看不到。
當然這也不是說所有情況都是不可以見的。如果一個容器div裏的另一個元素做x和y負值的移動，容器div如未做overflow:hidden處理，他在屏幕中是可見的。這方面就在這不做過多的闡述。
這似乎並沒有講到我們今天要說的主題。是不是有點等不及了，那接着往下看吧。
Canvas座標系統
上一篇文章中簡單的提到過，在Canvas中有2D和3D之分，可以通過getContext('2d')讓Canvas得到一個2D環境。言外之意，它還有一個3D環境。只不過我們現在只聊Canvas中的2D。這樣一來，在Canvas中座標系統也是有分的。
在Canvas中2D環境中其座標系統和Web的座標系統是一致的。座標原點(0,0)在<canvas>畫布的的左上角。同樣的分爲x和y兩個軸。x軸向右爲正值，y軸向下爲正值。同樣在canvas中，是沒有辦法直接看到。但同樣，在canvas中使用負座標不會導致canvas不能使用，只不過會移到canvas畫布的外面。
比如，我們在drawScreen ()函數中繪製一個矩形（這個drawScreen()函數是我們爲Canvas應用程序封裝的一個函數，詳細的可以看上一篇文章的介紹）：
function drawScreen () {
ctx.fillStyle = '#f36';
ctx.fillRect(15,15,20,20);
}
上面的代碼，我們在canvas畫布中以座標(15,15)（注意，這裏的單位是px）繪製了一個寬度和高度都爲20px的紅色矩形。如果用一個座標系統來表示的話類似下圖：
在canvas畫布中要畫出圖案之前，我們必須知道我們會在哪個地方畫出圖案。就如上圖所示。在Canvas的座標系統中，其兩軸的座標單位都是px。
是不是很簡單。不過在canvas除了默認的座標系統之外，還有一個概念叫Canvas座標系轉換。那什麼叫做Canvas座標系轉換，這裏不做闡述，因爲要闡述清楚這個概念，我們需要用一節內容專門來闡述。後面我們會花一節內容專門來介紹這個概念。
3D座標系統
前面也說過了，Canvas除了一個2D環境之外還有一個3D環境。既然2D有座標系統，其實3D環境也有座標系統。而這個座標稱爲3D座標系統。
3D座標系統多了一個z軸，用來描述深度。比如說一個物體在繪製時，在屏幕之內或之外多遠的距離。這裏簡單的介紹一下3D座標系統。
正如下圖所示，x軸從左向右在水平方向延展，y軸縱向延展，z軸的正值從屏幕中穿出。如果你熟悉2D座標系統的概念，那麼過渡到3D座標系統會相當直觀容易。
使用Canvas繪製一個座標系統
前面介紹了Canvas中的座標系統。那麼我們來看看怎麼使用canvas來繪製一個座標系統。雖然我們還沒有學怎麼使用Canvas來畫圖形相關的知識，但不用擔心，我們後面會學到的。本文介紹的這個示例，是用來展示一下座標系統，雖然還不知道怎麼畫圖形，但只要知道這樣就畫出圖形就可以了。其實這也是爲了下一篇文章做一個簡單的鋪墊，讓你對Canvas的學習充滿好奇心。
別的不多說了，直接上代碼，代碼中做了一些簡單的註釋：
function drawScreen () {
// 橫線與豎線的是距
var dx = 50;
var dy = 50;
// 初始座標原點
var x = 0;
var y = 0;
var w = myCanvas.width;
var h = myCanvas.height;
// 單個步長所表示的長度
var xy = 10;
ctx.lineWidth = 1;
// 畫橫線
while (y < h) {
y = y + dy;
ctx.moveTo(x, y);
ctx.lineTo(w, y);
ctx.stroke();
//橫座標的數字
ctx.font = "1px Calibri";
ctx.fillText(xy, x, y);
xy += 10;
}
// 畫豎線
y =0;
xy =10;
while (x < w) {
x = x + dx;
ctx.moveTo(x, y);
ctx.lineTo(x,h);
ctx.stroke();
//縱座標的數字
ctx.font = "1px Calibri";
ctx.fillText(xy,x,10);
xy+=10;
}
}
最終效果如下：
總結
在Canvas中的畫布上繪製圖案之前，我們必須要知道我們會在哪個地方畫出圖案。如此一來，我們就必須先了解Canvas的座標系統，因爲只有知道了Canvas的座標系統，我們會知道圖案會在畫布中那個地方展示出來。
Canvas具有兩個環境，一個是2D環境，另一個是3D環境。因爲我們主要了學的是Canvas中2D相關的知識。在Canvas中的2D環境中，其座標系統和我們的Web座標系統（瀏覽器座標系統）是一樣的。座標原點(0,0)在畫布的左上角位置處。沿x軸向右爲正值，沒y軸向下爲正值。在Canvas中，座標點也可以是負值，如果爲負值是，座標會移到畫布的外面。另外，在Canvas中其兩軸座標單位都是px。
現在我們對Canvas的2D座標系統有了一定的瞭解，也爲後續在畫布中繪製圖案打下了基礎。在接下來的學習中，我們將學習如何在畫布中繪製各種圖形。如果你感興趣的話，請持續關注後續相關更新。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/canvas/canvas-coordinate-system.html © w3cplus.com著作權歸作者所有。
個人建了前端學習羣，旨在一起學習前端。純淨、純粹技術討論，非前端人員勿擾！入羣加我微信：iamaixiaoxiao。
