Canvas 01 基本用法

這篇文章將介紹 HTML5 Canvas 的基本功能與使用方式。

什麼是 Canvas？ <canvas> 是 HTML5 新增的標籤，用來動態繪製 2D 或 3D 圖形。它讓我們能夠使用 JavaScript 在網頁上進行各種繪圖操作，包含圖像處理、動畫、遊戲開發等。

瀏覽器相容性: 需要注意的是，IE9 以下版本的瀏覽器不支援 canvas 元素。如果使用者的瀏覽器不支援，可以在標籤內部添加提示文字，讓使用者知道需要升級或更換瀏覽器。

html

<canvas>
    此瀏覽器不支援，請更新或換一個瀏覽器 https://xxx.xxx.xxx。
<canvas/>

Canvas 標籤與屬性

<canvas> 標籤有幾個重要的屬性，用來設定畫布的基本大小：

width 畫布寬度 (預設300)。
height 畫布高度 (預設150)。
id 用於 JS 獲取元素。

注意事項： canvas 標籤的 width 和 height 屬性不同於 CSS 中的寬高設定。如果 canvas 標籤的寬高與 CSS 設定的寬高不同，會導致內容扭曲或變形。通常建議直接控制 canvas 標籤本身的 width 和 height 屬性來避免這種情況。

html

    <canvas width="500" height="300" id="canvas">
    此瀏覽器不支援，請更新或換一個瀏覽器 https://xxx.xxx.xxx。
    <canvas/>

基本使用

要在 canvas 上繪圖，我們需要：

透過 id 獲取 canvas 元素，可以理解為獲取畫布。
使用 getContext() 方法獲取繪圖上下文（畫筆）。
指定圖形渲染方式，這裡我們將聚焦在 2D 繪圖。
使用 canvas API 開始繪製圖形。

html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 基本範例</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        // 獲取畫布元素
        let canvas = document.getElementById('canvas');
        // 獲取 2D 繪圖上下文
        let ctx = canvas.getContext('2d');
        // 設定畫筆顏色為紅色
        ctx.fillStyle = 'red';
        // 在 (10, 10) 的位置繪製 100x100 的矩形
        ctx.fillRect(10, 10, 100, 100);
    </script>
</body>
</html>

解說：

getContext('2d')：這個方法返回一個 CanvasRenderingContext2D 對象，它包含了各種用於繪製 2D 圖形的方法和屬性。
fillStyle：設定填充圖形的顏色。
fillRect(x, y, width, height)：繪製一個填充的矩形，參數為矩形的 x、y 起始座標和寬高。

總結

HTML5 的 canvas 標籤為網頁上的 2D 和 3D 繪圖提供了強大的功能。要在 canvas 上進行繪圖，首先需要獲取畫布及其繪圖上下文，並使用 JavaScript 提供的 API 來進行圖形的繪製。當你開始熟悉這些基本操作後，便可以進一步探索更複雜的功能，例如動畫、圖像處理、遊戲開發等。

希望這篇文章能幫助你了解 canvas 的基本用法！

Canvas 01 基本用法 ​

Canvas 標籤與屬性 ​

基本使用 ​

總結 ​

Canvas 01 基本用法

Canvas 標籤與屬性

基本使用

總結