WebGL - HTML5 Canvas 概覽

Hello, 未來的網頁圖形魔法師們！今天，我們即將踏上一段令人興奮的旅程，進入 WebGL 和 HTML5 Canvas 的世界。作為你們親切友善的鄰居電腦老師，我非常高興能夠帶領你們進行這次冒險。如果你是編程新手，別擔心——我們將從最基本的知識開始，然後逐步學習。所以，拿起你的虛擬畫筆，讓我們開始吧！

WebGL - Html5 Canvas Overview

HTML5 Canvas

HTML5 Canvas 是什麼？

想像一下你有一個神奇的數字畫布，你可以使用代碼在上面畫任何你想要的东西。這就是 HTML5 Canvas 的本質！它是 HTML5 中引入的一個強大元素，讓我們能在網頁瀏覽器中繪製圖形、創建動畫，甚至製作遊戲。

創建你的第一個 Canvas

讓我們從創建一個簡單的 HTML5 Canvas 開始：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個 Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

在這個例子中，我們創建了一個具有 "myCanvas" id、400 像素寬和 200 像素高的 canvas 元素。這就像設置一個帶有空白畫布的畫架——現在，我們準備好開始繪畫了！

在 Canvas 上繪圖

現在，我們有了 canvas，讓我們在上面畫點東西。我們將使用 JavaScript 來完成這個任務：

<!DOCTYPE html>
<html>
<head>
<title>在 Canvas 上繪圖</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

讓我們分解一下：

我們使用 getElementById 獲取 canvas 元素的引用。
我們使用 getContext('2d') 獲取 canvas 的 2D 繪圖上下文。
我們使用 fillStyle 設置填充顏色為藍色。
最後，我們使用 fillRect(x, y, width, height) 畫了一個藍色矩形。

當你在瀏覽器中打開這個頁面時，你會看到畫布上出現了一個藍色矩形。恭喜你！你已經創作了你的第一幅數字繪畫！

繪圖上下文

繪圖上下文是什麼？

將繪圖上下文想像為你的繪畫工具集。它提供了方法和屬性，讓你能在 canvas 上繪圖。在前面的例子中，我們使用了 2D 繪圖上下文，但還有其他類型的上下文。

2D 繪圖上下文

2D 繪圖上下文是最常見的，並提供了一系列 2D 繪圖功能。以下是一些有用的 2D 上下文方法的表格：

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

讓我們使用一些這些方法來創建一個更複雜的繪圖：

<!DOCTYPE html>
<html>
<head>
<title>複雜繪圖</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

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

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

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

// 繪製文字
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('我的房子', 140, 190);
</script>
</body>
</html>

在這個例子中，我們使用各種 2D 上下文方法繪製了一個簡單的房子。我們使用 fillRect 繪製房子和門，使用 beginPath、moveTo 和 lineTo 繪製屋頂，使用 fillText 添加標籤。試著玩轉坐標和顏色，創造你自己的獨特房子！

WebGL 上下文

WebGL 介紹

現在，讓我們進入 3D 圖形的精彩世界，WebGL。WebGL（Web 圖形庫）是一個 JavaScript API，用於在任何兼容的網頁瀏覽器中渲染互動的 3D 和 2D 圖形，而無需使用插件。

獲取 WebGL 上下文

要使用 WebGL，我們需要獲取 WebGL 繪圖上下文，而不是 2D 上下文。以下是方法：

<!DOCTYPE html>
<html>
<head>
<title>WebGL 上下文</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL 不支援，轉而使用 experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('你的瀏覽器不支援 WebGL');
}
</script>
</body>
</html>

在這個例子中，我們嘗試獲取 WebGL 上下文。如果它不支援，我們轉而使用 experimental-webgl 上下文。如果這個也不可用，我們會提示用戶他們的瀏覽器不支援 WebGL。

一個簡單的 WebGL 示例

讓我們創建一個簡單的 WebGL 示例，用顏色清空畫布：

<!DOCTYPE html>
<html>
<head>
<title>簡單 WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL 不支援，轉而使用 experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('你的瀏覽器不支援 WebGL');
} else {
// 設置清空顏色為紅色，完全不透明
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// 使用指定清空顏色清空顏色緩存
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

在這個例子中，我們使用 gl.clearColor(red, green, blue, alpha) 設置清空顏色為紅色，其中每個值範圍從 0.0 到 1.0。然後我們使用 gl.clear(gl.COLOR_BUFFER_BIT) 用這個顏色清空顏色緩存。當你運行這個示例時，你應該會看到一個紅色畫布。

記住，WebGL 比 2D canvas 繪圖要複雜得多，涉及到著色器、緩存和矩陣等概念。但別擔心！我們將在後續課程中探討這些內容。

結論

恭喜你！你已經邁出了進入 HTML5 Canvas 和 WebGL 世界的第一步。我們介紹了創建 canvas、2D 繪圖以及 WebG

Credits: Image by storyset