以下是原文翻译成繁體中文的版本：

# JavaScript - Canvas：數位繪圖初學者指南

你好啊，有志於成為程序員的你！我很興奮能成為你進入JavaScript和Canvas世界的引路人。作為一個教電腦科學超過十年的老師，我可以告訴你，Canvas是最有趣、最值得學習的主題之一。這就像在你的網頁瀏覽器裡擁有一個數位遊樂場！

## 什麼是Canvas？

在我們深入代碼之前，讓我們先了解Canvas是什麼。想像你有一張空白的紙和一套彩色筆。這其實就是Canvas在數位世界中的概念——在你的網頁上的一塊空白區域，你可以使用JavaScript在其中繪製任何你想要的东西！

Canvas隨著HTML5引入，並從此成為了一個強大的工具，用於在網頁瀏覽器中直接創建圖形、動畫甚至遊戲。這就像在你的代碼編輯器裡有一個迷你的藝術工作室！

## 使用JavaScript操作Canvas

現在，讓我們挽起袖子開始繪圖吧！首先，我們需要在HTML中設置我們的Canvas。

```html
<canvas id="myCanvas" width="400" height="200"></canvas>

這將創建一個寬400像素、高200像素的canvas元素。把它當作你的數位繪圖板。

開始使用Canvas

要在我們的canvas上開始繪圖，我們需要在JavaScript代碼中獲取對它的引用並獲取它的繪圖上下文。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

getContext('2d')方法給我們一個2D繪圖上下文——我們將用來在canvas上繪圖的工具。

繪製形狀

讓我們從一些簡單的東西開始——繪製一個矩形！

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

這段代碼繪製一個從坐標(50, 50)開始的藍色矩形，寬度為100像素，高度為75像素。這就像告訴你的數位筆，“嘿，在這裡畫一個藍色矩形，並讓它這麼大！”

繪製線條

現在，讓我們試著繪製一條線：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

這段代碼開始一個新的路徑，將“筆”移動到(50, 50)，然後繪製一條線到(200, 100)，最後描繪路徑使其可見。這就像玩連線遊戲，但用的是代碼！

繪製圓形

我們來畫一個開心的臉吧？首先，讓我們為臉畫一個圓形：

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

這會畫出一個黃色填充、黑色輪廓的圓形。arc方法可能看起來有點嚇人，但把它當作是告訴你的筆，“在(200, 100)這裡畫一個半徑為50的圓，從0開始，一直繞一圈（那就是Math.PI * 2的意思）。”

添加文字

讓我們在canvas上添加一些文字：

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

這將字體設置為20像素的Arial，將顏色設置為黑色，並從位置(10, 30)開始寫“Hello, Canvas!”。

範例

現在我們已經介紹了基礎知識，讓我們來看一些有趣的範例，看看Canvas能夠真正做些什麼！

範例1：繪製一個房子

// 設置canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 繪製房子身體
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 繪製屋頂
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// 繪製門
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// 繪製窗戶
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

這段代碼繪製了一個簡單的房子，有棕色的身體、紅色的屋頂、藍色的門和黃色的窗戶。這就像用代碼塊而不是樂高積木來建造房子！

範例2：動畫圓形

讓我們讓東西移動起來！這裡有一個簡單的彈跳圓形動畫：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fillStyle = 'green';
    ctx.fill();

    if (x + radius > canvas.width || x - radius < 0) {
        dx = -dx;
    }
    if (y + radius > canvas.height || y - radius < 0) {
        dy = -dy;
    }

    x += dx;
    y += dy;

    requestAnimationFrame(drawCircle);
}

drawCircle();

這段代碼創建了一個綠色的圓形，在canvas上彈跳。這就像創造你自己小小的Pong遊戲！

Canvas方法表

這裡有一些我們使用過的以及一些額外的常用Canvas方法：

方法	描述
fillRect(x, y, width, height)	繪製一個填充矩形
strokeRect(x, y, width, height)	繪製一個矩形輪廓
clearRect(x, y, width, height)	清除指定的矩形區域
beginPath()	開始一個新的路徑
moveTo(x, y)	將路徑移動到指定的點
lineTo(x, y)	繪製一條線到指定的點
arc(x, y, radius, startAngle, endAngle)	繪製一個弧或圓形
fill()	填充當前的路徑
stroke()	描繪當前的路徑
fillText(text, x, y)	在canvas上繪製填充文字
strokeText(text, x, y)	在canvas上繪製文字輪廓

記住，學習編程就像學習一門新語言。這需要時間和練習，但在你意識到之前，你將會用Canvas創造出令人驚奇的事物！繼續嘗試，嘗試結合不同的形狀和方法，最重要的是，享受其中的樂趣。誰知道呢？下一個大型的網絡遊戲可能就是用Canvas由你創建的！

Credits: Image by storyset