WebGL - HTML5 画布概述

你好，未来的网页图形魔法师们！今天，我们将踏上一段令人兴奋的旅程，探索 WebGL 和 HTML5 画布的世界。作为你友好的计算机老师，我很高兴能引导你们进行这次冒险。如果你是编程新手，不用担心——我们将从最基础的知识开始，逐步学习。那么，拿起你的虚拟画笔，让我们一起开始吧！

WebGL - Html5 Canvas Overview

HTML5 画布

HTML5 画布是什么？

想象你有一个神奇的数字画布，你可以使用代码在上面绘制任何你想要的东西。这就是 HTML5 画布的本质！它是 HTML5 中引入的一个强大元素，允许我们在网页浏览器中绘制图形、创建动画，甚至构建游戏。

创建你的第一个画布

让我们从创建一个简单的 HTML5 画布开始：

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

在这个例子中，我们创建了一个 ID 为 "myCanvas"，宽度为 400 像素，高度为 200 像素的画布元素。这就像设置了一个带有空白画布的画架——现在我们准备开始绘画了！

在画布上绘画

现在我们有了画布，让我们在上面画点东西。我们将使用 JavaScript 来完成这个任务：

<!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 = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

让我们分解一下：

我们使用 getElementById 获取画布元素的引用。
我们使用 getContext('2d') 获取画布的 2D 渲染上下文。
我们设置填充颜色为蓝色，使用 fillStyle。
最后，我们使用 fillRect(x, y, width, height) 绘制一个蓝色矩形。

当你在浏览器中打开这个页面时，你会在画布上看到一个蓝色矩形。恭喜你！你已经创建了你的第一幅数字画作！

渲染上下文

渲染上下文是什么？

将渲染上下文想象成你的绘画工具集。它提供了方法和属性，允许你在画布上绘画。在之前的例子中，我们使用了 2D 渲染上下文，但还有其他类型。

2D 渲染上下文

2D 渲染上下文是最常用的，并提供了一系列的 2D 绘图功能。下面是一些有用的 2D 上下文方法表格：

方法	描述
fillRect(x, y, width, height)	绘制一个填充矩形
strokeRect(x, y, width, height)	绘制矩形的轮廓
fillText(text, x, y)	在画布上绘制填充文本
strokeText(text, x, y)	在画布上绘制文本轮廓
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 画布渲染要复杂得多，涉及到着色器、缓冲区和矩阵等概念。但别担心！我们将在未来的课程中探讨这些。

结论

恭喜你！你已经迈出了进入 HTML5 画布和 WebGL 世界的第一步。我们已经介绍了创建画布、2D 绘图，甚至是 WebGL 的基础知识。

记住，学习图形编程就像学习绘画一样——需要练习和耐心。不要害怕实验代码示例，改变值，看看会发生什么。你越多地尝试，就越能更好地理解一切是如何工作的。

在下一课中，我们将更深入地探讨更高级的 2D 画布技术，并开始探索 WebGL 着色器的迷人世界。在此之前，请继续编码，快乐绘图！

Credits: Image by storyset