HTML - Canvas：網頁圖形入門指南

你好，未來的網頁魔法師！今天，我們將踏上一段令人興奮的旅程，進入 HTML Canvas 的世界。別擔心如果你從未寫過一行代碼——我會成為你的友好導遊，我們將一步一步地探索這個主題。所以，拿起你的虛擬畫筆，讓我們創作出一些數位傑作吧！

HTML - Canvas

什麼是 HTML Canvas？

在我們深入之前，讓我們了解一下 HTML Canvas 是什麼。想像你有一張空白的紙，你可以在上面畫任何你想要的东西——這就是 Canvas 的本質，但在數位領域中。它是一個 HTML 元素，讓我們可以使用 JavaScript 畫圖形、創建動畫，甚至開發遊戲。

範例

讓我們從一個簡單的範例開始，讓我們的腳濕一下水：

<canvas id="myCanvas" width="200" height="100"></canvas>

這段代碼在您的網頁上創建了一個 canvas 元素。這就像設置一個畫架，上面有一張空白的畫布，等待您的藝術觸碰！

繪圖上下文

現在，我們有了畫布，我們需要一種方式在上面繪圖。這就是繪圖上下文的作用。把它當作你的繪畫工具集。我們將使用 JavaScript 來獲取這個上下文：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

在這裡，我們抓取我們的畫布，並請求一套 2D 繪圖工具。這就像拿起你的鉛筆和調色板！

準備支援

在我們繼續之前，有關瀏覽器支援的快速筆記。大多數現代瀏覽器都支援 Canvas，但總是最好檢查一下。這裡有一個便捷的方法來檢測支援：

if (canvas.getContext) {
// Canvas 受支援
} else {
// Canvas 不受支援
}

這段代碼就像在問："嘿，瀏覽器，你能處理這個很棒的 canvas 邦德嗎？" 如果它說可以，我們就可以繼續！

HTML Canvas - 繪製矩形

讓我們從一些簡單的事情開始——繪製矩形。Canvas 有三種方法來做到這點：

方法	描述
fillRect(x, y, width, height)	繪製一個填充矩形
strokeRect(x, y, width, height)	繪製一個矩形輪廓
clearRect(x, y, width, height)	清除指定的矩形區域

這裡有一個範例：

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

這段代碼繪製了一個紅色填充的正方形，一個藍色輪廓的正方形，然後擦除紅色正方形的一部分。這就像用彩色蜡筆畫畫，然後使用橡皮擦！

HTML Canvas - 繪製路徑

現在，讓我們用路徑來做得更有創意一些。路徑就像連接點的謎題。這樣做：

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

這樣創造了一個三角形。我們從 (50, 50) 開始，畫一條線到 (200, 50)，然後到 (200, 200)，最後關閉路徑。這就像玩 "不要抬起你的鉛筆" 的遊戲！

HTML Canvas - 繪製線條

繪製線條與路徑相似，但更簡單。這裡有一個範例：

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

這樣從左上角畫一條對角線到 canvas 的中右位置。這就像用兩個點來玩連接遊戲！

HTML Canvas - 繪製貝茲曲線

現在，讓我們在工具箱中加入一些曲線。貝茲曲線就像是繪圖世界的花體字：

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

這樣創造了一個從 (20, 20) 開始，使用 (20, 100) 和 (200, 100) 作為控制點，結束於 (200, 20) 的曲線。這就像畫一個笑容！

HTML Canvas - 繪製二次曲線

二次曲線就像是貝茲曲線的簡單表親：

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

這樣從 (20, 20) 到 (180, 20) 創造了一個曲線，並且 (100, 100) 作為控制點。這對於畫拱門來說非常完美！

HTML Canvas - 使用圖像

Canvas 不僅僅是繪圖——我們也可以處理圖像：

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

這樣加載一個圖像並在 canvas 上繪製它。這就像在你的數位剪貼簿上貼上一個貼紙！

HTML Canvas - 創建漸變

讓我們用漸變來增加一些色彩魅力：

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

這樣創造了一個從紅色到藍色的漸變，並用它來填充一個矩形。這就像創造一個數位的日落！

HTML Canvas - 樣式和顏色

Canvas 提供了多種方式來風格化我們的繪圖：

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

這樣創造了一個黃色正方形和一個厚邊框的黑色正方形。這就像在線條內填充顏色，但我們也可以選擇線條！

HTML Canvas - 文本和字體

我們也可以在 canvas 上添加文本：

ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

這樣以 30px Arial 字體寫下 "Hello, Canvas!"。這就像在您的數位藝術作品上添加標題！

HTML Canvas - 織紋和陰影

讓我們添加一些深度，使用織紋和陰影：

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 200);
};

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

這樣創造了一個有織紋的背景和一個帶陰影的藍色正方形。這就像在您的數位繪畫中添加質感和深度！

HTML Canvas - 儲存和恢復狀態

Canvas 讓我們可以儲存和恢復繪圖狀態：

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

這樣先繪製一個紅色正方形，然後是一個藍色正方形。這就像在您的數位藝術作品中有多個層次！

HTML Canvas - 平移

我們可以移動我們的繪圖原點：

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

這樣移動我們的繪圖點並繪製一個正方形。這就像在開始繪圖之前滑動您的紙張！

HTML Canvas - 旋轉

讓我們為我們的繪圖添加一些旋轉：

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

這樣旋轉我們的 canvas 並繪製一個矩形。這就像在繪圖之前轉動您的紙張！

HTML Canvas - 缩放

我們也可以改變我們繪圖的縮放：

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

這樣將我們繪製的一切放大兩倍。這就像在您的藝術作品上使用放大鏡！

HTML Canvas - 變換

變換允許進行更複雜的操作：

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

這樣在繪製之前應用了一個複雜的變換。這就像在您的數位世界中曲折現實！

HTML Canvas - 合成

我們可以控制新繪圖與現有繪圖的交互：

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

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

這樣先繪製一個藍色正方形，然後在它上面繪製一個紅色正方形。這就像在油畫上層層叠加不同的顏色！

HTML Canvas - 動畫

最後，讓我們用動畫來為 canvas 帶來生命：

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

這樣創造了一個在屏幕上移動的正方形。這就像創造您自己的小電影！

這就是 HTML Canvas 的旋風之旅！記住，精通 Canvas 的關鍵在於練習。所以，嘗試、玩樂，最重要的是，享受樂趣！誰知道，您可能會創造出下一個數位傑作。祝您編程愉快，未來的網絡畫家！

Credits: Image by storyset