繪圖座標系

二維的直角座標系統是您所習慣使用的，它使用向右為正的X軸與向上為正的Y軸來規範出平面上的每一個點。

然而在電腦螢幕繪圖上，則是使用向右為正的X軸、向下為正的Y軸來定出繪圖時的位置，而繪圖目的地的左上角為座標原點，如下所示：

所以在二維直角座標系統中，上圖中的Y1會是個負值，但在繪圖座標系統中的Y1要是正值，所以在繪圖時自然必須將Y軸方向改過來，不過這會造成一些困擾，最好是寫成函式，在繪圖時呼叫函式自動幫我們轉換，例如：

// Java
public void setLocation(int x, int y) {
    this.x = x;
    this.y = -y;
}

// JavaScript
function setLocation(x, y) {
    this.x = x;
    this.y = -y;
}

在繪圖時，我參考座標有時並不希望一定是在左上角，所以可設定一個參考原點，以該點作為參考定出繪圖座標，例如：

此時可以使用下面這個公式，其中x與y是相對於Org的座標：

// Java
public void setLocation(Orgin org, int x, int y) {
    this.x = org.getX() + x;
    this.y = org.getY() -y ;
}

// JavaScript
function setLocation(org, x, y) {
    this.x = org.getX() + x;
    this.y = org.getY() + y;
}

可以讓這個公式更有彈性，如果有時想直接使用原來的繪圖座標，也就是Y軸向下的座標，可以使用下面這個公式，當yA為1時，表示使用Y軸向上的座標（直角座標），當yA為0時，表示使用Y軸向上的座標（繪圖座標）：

// Java
public void setLocation(Orgin org, int x, int y, int yA) {
    this.x = org.getX() + x;
    this.y = org.getY() + y * (1 - 2 * yA) ;
}

// JavaScript
function setLocation(org, x, y, yA) {
    this.x = org.getX() + x;
    this.y = org.getY() + y * (1 - 2 * yA) ;
}

不管是文字或圖形，當顯示在螢幕上時都是以一個點為單位，每一個點稱之為一個像素（pixel，picture element的合併）。

水平解析度是指在螢幕範圍內的一條水平線中，使用多少像素，而垂直解析度則是在螢幕範圍中的一條垂直使用多少像素。

多數的繪圖座標系統都是使用像素作為座標單位，例如在螢幕解析度為800X600的情況下，螢幕繪圖的座標是以螢幕的左上角為(0, 0)，右上角為(800, 0)，左下角為(0, 600)，右下角為(800, 600)，若為1024X768或其它解析度則依此類推，螢幕解析度越高，則繪製出來的圖形越細緻。

如果繪製的目的地並不是以螢幕為範圍，而是以自行定義的畫布為範圍，例如一個視窗的大小為(X, Y)，則繪圖的座標是以視窗的左上角（不含標題列）為(0, 0)，右上角為(X, 0)，左下角為(0, Y)，右下角為(X, Y)。