在現代的web應用程序中，javascript是不可或缺的一部分。它可以用來添加動態性、交互性和實用性。JavaScript已成為最受歡迎的編程語言之一，已成為Web構建者的首選語言之一。它對于編寫web應用程序中所需的交互，動畫，表單控制以及其他許多關鍵任務都非常重要。

二維編程是javascript的一個基本方向，它可以用來創建許多各種類型的應用程序，包括游戲，圖表，商品展示等。在這里，我們將介紹JavaScript二維編程的基礎知識。

二維坐標系統是二維編程的核心。x軸和y軸是坐標系統的兩個軸，它們分別表示水平方向和垂直方向。在編程中，通常使用一個點來表示一個二維平面的位置。這個點包括兩個坐標——x坐標和y坐標。

var x = 10;
var y = 20;

如上述代碼，其中x和y分別表示點的坐標。這些坐標可以使用圖形庫（如canvas）在屏幕上繪制出一個點。例如，在canvas上為一個點繪制一個圓可以是以下代碼：

var cvs=document.getElementById("canvas");
var ctx=cvs.getContext("2d");
ctx.beginPath();
ctx.arc(10,20,5,0,2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();

在這個例子中，cvs是canvas對象，ctx是canvas追蹤繪圖的上下文對象。接下來，我們使用beginPath()方法開始路徑繪制。這使用arc(x,y,radius,start,end)方法繪制實心圓，其中x，y是圓心坐標，半徑為radius，表示描繪圓的起始點和結束點的弧度，最后使用fillStyle屬性設置填充顏色和fill()方法進行實心圓的繪制。

一旦你掌握了繪制點的基本方法，你就可以開始考慮繪制其他形狀。JavaScript提供了適用于繪制各種形狀的庫，例如從線，矩形到三角形，弧形等。

圓形是二維坐標中最簡單的形狀之一。在大多數情況下，圓是由其圓心和半徑確定的。創建一個圓，你需要提供圓心的x，y坐標以及半徑。在此基礎上，你可以使用canvas上的arc()方法繪制一個圓。 在下面的代碼中，我們將創建一個半徑為100像素的圓：

var cvs=document.getElementById("canvas");
var ctx=cvs.getContext("2d");
ctx.beginPath();
ctx.arc(200,200,100,0,2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

矩形是二維平面中另一個常見的形狀。矩形由其左上角和右下角的坐標確定。canvas providefillRect()和strokeRect()兩個方法來渲染矩形。因此，可以使用以下代碼來繪制一個矩形：

var cvs=document.getElementById("canvas");
var ctx=cvs.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(50,50,200,200);

三角形是另一種基本的形狀，我們可以通過使用canvas的路徑繪制方法beginPath()、moveTo()和lineTo()來繪制。以下是一個繪制三角形的例子：

var cvs=document.getElementById("canvas");
var ctx=cvs.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(180, 200);
ctx.lineTo(20, 200);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

這是一個生成三角形的步驟，首先要使用beginPath()方法開始路徑，然后通過moveTo()方法指定第一個頂點（起點）的坐標。接下來使用lineTo(x,y)方法沿著另外兩個點的坐標來繪制形狀。最后，在closePath()方法中關閉路徑并填充顏色。