Canvas學習 Canvas裡的座標系統

上一節我們做好了使用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的座標系統的原點是在螢幕（瀏覽器螢幕）的左上角。如下圖所示：

同樣的它有兩個座標軸，x軸（水平軸）和y軸（垂直軸）。兩軸的交匯點（左上角）為座標原點(0,0)。原點沿x軸向右是正值，原點沿y軸向下是正值。

這看上去和笛卡座標有點不一樣。沒有顯式的x軸負值和y軸負值。其實在web的座標系統中一樣可以使用負座標，只不過有可能會跑到螢幕外面，讓人看不到。

當然這也不是說所有情況都是不可以見的。如果乙個容器div裡的另乙個元素做x和y負值的移動，容器div如未做overflow:hidden處理，他在螢幕中是可見的。這方面就在這不做過多的闡述。

這似乎並沒有講到我們今天要說的主題。是不是有點等不及了，那接著往下看吧。

在canvas中2d環境中其座標系統和web的座標系統是一致的。座標原點(0,0)在畫布的的左上角。同樣的分為x和y兩個軸。x軸向右為正值，y軸向下為正值。同樣在canvas中，是沒有辦法直接看到。但同樣，在canvas中使用負座標不會導致canvas不能使用，只不過會移到canvas畫布的外面。

function

drawscreen
() 

在canvas畫布中要畫出圖案之前，我們必須知道我們會在哪個地方畫出圖案。就如上圖所示。在canvas的座標系統中，其兩軸的座標單位都是px。

是不是很簡單。不過在canvas除了預設的座標系統之外，還有乙個概念叫canvas座標系轉換。那什麼叫做canvas座標系轉換，這裡不做闡述，因為要闡述清楚這個概念，我們需要用一節內容專門來闡述。後面我們會花一節內容專門來介紹這個概念。

前面也說過了，canvas除了乙個2d環境之外還有乙個3d環境。既然2d有座標系統，其實3d環境也有座標系統。而這個座標稱為3d座標系統。

3d座標系統多了乙個z軸，用來描述深度。比如說乙個物體在繪製時，在螢幕之內或之外多遠的距離。這裡簡單的介紹一下3d座標系統。

正如下圖所示，x軸從左向右在水平方向延展，y軸縱向延展，z軸的正值從螢幕中穿出。如果你熟悉2d座標系統的概念，那麼過渡到3d座標系統會相當直觀容易。

別的不多說了，直接上**，**中做了一些簡單的注釋：

function

drawscreen
() // 畫豎線
y =0
; xy =10
; while
(x < w) 
}

在canvas中的畫布上繪製圖案之前，我們必須要知道我們會在哪個地方畫出圖案。如此一來，我們就必須先了解canvas的座標系統，因為只有知道了canvas的座標系統，我們會知道圖案會在畫布中那個地方展示出來。

canvas具有兩個環境，乙個是2d環境，另乙個是3d環境。因為我們主要了學的是canvas中2d相關的知識。在canvas中的2d環境中，其座標系統和我們的web座標系統（瀏覽器座標系統）是一樣的。座標原點(0,0)在畫布的左上角位置處。沿x軸向右為正值，沒y軸向下為正值。在canvas中，座標點也可以是負值，如果為負值是，座標會移到畫布的外面。另外，在canvas中其兩軸座標單位都是px。

原文:

w3cplus.com著作權歸作者所有。

Canvas學習系列一 初識canvas

最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...

Canvas學習筆記 Canvas常用API方法

var canvas document.queryselector canvas var context canvas.getcontext 2d 之後的方法呼叫都是基於contextcontext.beginpath 開啟一條新的路徑。不一定要與closepath 配對，可以不關閉舊路徑直接開啟新...

Canvas學習系列一 初識canvas

最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...