JavaScript是一種常見的編程語言，用于開發 Web 應用程序。JavaScript主要用于交互式效果的開發，如下拉菜單、表單驗證等。其中，JavaScript 2D 是處理 JavaScript 中圖形繪制的一套 API，它可以實現基本的繪圖，如繪圖、合并圖像等。

JavaScript 2D 可以與 HTML5 的 canvas 元素結合使用，以在網頁上繪制圖形。例如，下面的代碼是使用 JavaScript 2D 繪制簡單圖形的示例：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'blue';
ctx.fillRect(30, 30, 50, 50);

上面的代碼創建了一個 canvas 元素，然后獲取其上下文 ctx 對象。然后，我們使用 fillStyle 屬性來設置填充顏色，并使用 fillRect 方法來在 canvas 上繪制一個矩形。在這個例子中，我們繪制了兩個矩形。

在 JavaScript 2D 中，有多種方法可以繪制圖形。除了 fillRect 方法外，還可以使用 strokeRect 方法來繪制邊框矩形，以及 arc 方法來繪制圓形。例如，下面的代碼演示了如何繪制一個圓形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = '#FF6A6A';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#FF0000';
ctx.stroke();

上面的代碼使用 arc 方法創建了一個圓形路徑。稍后，我們使用 fillStyle 屬性來設置形狀填充顏色，并使用 fill 方法來填充形狀。我們還使用 lineWidth 和 stroke 方法來設置邊框線寬和顏色，以及繪制邊框。

另外一個常見的任務是在圖形中添加文本。下面是一個簡單的例子，演示如何在 canvas 上繪制文本：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = '#FF0000';
ctx.fillText('Hello World!', 10, 50);

上面的代碼使用 font 和 fillStyle 屬性分別設置文本字體和顏色。然后，我們使用 fillText 方法在 canvas 上繪制文本。在這個例子中，我們將文本字符串 Hello World! 繪制在 canvas 的 (10, 50) 位置。

JavaScript 2D 不僅可以繪制基本的幾何形狀和文本，它還可以處理圖像。例如，下面的代碼演示了如何在 canvas 上繪制一個 img 元素：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = 'example.png';

上面的代碼使用 Image 對象創建了一個圖像對象，然后使用 onload 回調函數加載圖像。一旦圖像加載完成，我們使用 drawImage 方法在 canvas 上繪制圖像。在這個例子中，我們繪制的圖像名稱為 example.png。

以上是一些簡單的 JavaScript 2D 繪圖示例。JavaScript 2D 在 Web 開發中具有廣泛的應用，它不僅可以為用戶提供優美的圖形顯示效果，還可以增強用戶交互性、提高用戶體驗。