Day 3 - Canvas：讓瀏覽器開始繪圖

18th鐵人賽

Andygong

團隊nutc imac

2026-09-17 11:59:31

73 瀏覽

分享至

今天開始讓網頁「動起來」。
前兩天我們先認識 Modern Web，並用 HTML + CSS + JavaScript 做出第一個網頁。
今天加入 Canvas，讓 JavaScript 可以直接在瀏覽器裡畫圖與製作簡單動畫。

一. 今天完成目標

今天我們會完成兩件事情：

1. 把 HTML、CSS、JavaScript 正式分成不同檔案
1. 使用 Canvas 畫出一個會移動的圓形

今天做完之後，專案會變成：
Modern-Web /
│
├── index.html
│
├── css/
│ └── style.css
│
└── js/
└── main.js
這也是之後 30 天專案會繼續使用的基本架構。

二. 完整程式碼

index.html

<!DOCTYPE html>
<html lang="zh-TW">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>從 Web 到宇宙</title>

    <!-- 載入 CSS -->
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="container">

        <h1>從 Web 到宇宙</h1>

        <p>DAY 3｜Canvas</p>

        <canvas
            id="canvas"
            width="800"
            height="500"
        ></canvas>

    </div>

    <!-- 載入 JavaScript -->
    <script src="js/main.js"></script>

</body>

</html>

css/style.css

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #050816;
    color: white;

    font-family: Arial, sans-serif;
    text-align: center;
}

.container {
    padding: 40px;
}

h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

p {
    color: #aaaaaa;
    font-size: 18px;
}

canvas {
    display: block;

    margin-top: 20px;

    border: 1px solid #444;
    background: black;
}

js/main.js

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

let x = 50;

function animate() {

    // 清除上一個畫面
    ctx.clearRect(
        0,
        0,
        canvas.width,
        canvas.height
    );

    // 開始畫圖
    ctx.beginPath();

    // 畫圓形
    ctx.arc(
        x,
        250,
        30,
        0,
        Math.PI * 2
    );

    // 設定顏色
    ctx.fillStyle = "orange";

    // 填滿圓形
    ctx.fill();

    // 移動
    x += 2;

    // 如果超出畫面
    if (x > canvas.width + 30) {
        x = -30;
    }

    // 下一幀繼續執行
    requestAnimationFrame(animate);
}

animate();

三、程式碼簡單說明

今天正式把檔案分開 DAY 2 的時候，我們把 HTML、CSS、JavaScript 寫在一起。

今天開始分成：

index.html
style.css
main.js

HTML 透過 --> <link rel="stylesheet" href="css/style.css"> 載入 CSS。
再透過 --> <script src="js/main.js"></script> 載入 JavaScript。
這樣之後專案變大時會比較容易管理。

接下來說說 Canvas 是什麼？

Canvas 可以把它想成網頁裡的一塊畫布。
我們在 HTML 裡建立：

<canvas
    id="canvas"
    width="800"
    height="500"
></canvas>

這裡建立了一個 [ 寬度：800 高度：500 ] 的畫布，但是 Canvas 本身不會自己畫東西
需要交給 JavaScript。

JavaScript 取得 Canvas

首先 const canvas = document.getElementById("canvas"); 找到 HTML 裡的 Canvas。
接著 const ctx = canvas.getContext("2d"); 取得 Canvas 的 2D 繪圖環境。
之後就可以用 ctx 畫圖。

畫出一個圓並讓圓移動

畫出一個圓主要程式是：

ctx.arc(
    x,
    250,
    30,
    0,
    Math.PI * 2
);

簡單理解 x → X 座標、250 → Y 座標、30 → 半徑
所以現在就是在 Canvas 裡畫一個圓。

我們設定 let x = 50; 然後每次 x += 2;
也就是 x = 50 → 52 → 54 → 56 → 58 → ... 所以圓就會慢慢往右邊移動
下面這段指令讓圓球超出畫布則會回到左邊重新開始 :

if (x > canvas.width + 30) {
        x = -30;
    }

最後 requestAnimationFrame(animate);
會讓瀏覽器在下一幀再次執行 animate()。因此形成
清除畫面 → 畫圓 → 移動 → 下一幀 → 清除畫面 → 畫圓 → 移動 → ...
這就是最基本的 Canvas 動畫。
如果成功執行，你應該會看到：

橘色圓形會一直從左邊移動到右邊，超出畫面後重新出現。