WebGL - HTML5 Canvas 概览

WebGL 的 HTML5 Canvas 概览

现代网络浏览器提供了强大的图形创建功能，包括 HTML5 的 <canvas> 元素、SVG、CSS 转换（CSS Transforms）和 WebGL。WebGL 应用程序专门使用 <canvas> 元素作为其绘制表面。

HTML5 的 <canvas> 元素

<canvas> 元素提供了一个分辨率相关的位图区域，您可以使用 JavaScript 在其中绘制图形。它充当图形的容器；实际的绘制是通过一个 渲染上下文（rendering context） 完成的。

语法

一个基本的 canvas 元素包含 width 和 height 属性，以及像 id 这样的标准 HTML 属性。

<canvas id="myCanvas" width="640" height="480">
  <!-- Fallback content for browsers that don't support canvas -->
  Your browser does not support the HTML5 canvas element.
</canvas>

Canvas 属性

关键属性：

• id: 一个唯一的标识符，用于通过 JavaScript 访问 canvas 元素（document.getElementById）。
• width: canvas 绘制表面的宽度，以 CSS 像素为单位。
• height: canvas 绘制表面的高度，以 CSS 像素为单位。

至关重要的是，width 和 height 必须直接作为属性设置在 <canvas> 标签本身上，而不仅仅是通过 CSS 设置。通过 CSS 设置尺寸会缩放 canvas 元素，但不会改变底层绘制缓冲区的大小，这可能导致图形模糊或失真。如果省略属性，默认大小通常是 300x150 像素。

示例 - 创建带有边框的 Canvas

这段 HTML 创建了一个 canvas 并使用 CSS 添加了视觉边框。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
    <style>
        #myCanvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

预期结果：

这将显示一个带有红色边框的 200x100 像素的空白区域。

渲染上下文（Rendering Contexts）

<canvas> 元素本身只是一个空白画布。要在其上绘图，您需要使用该元素的 getContext() 方法获取一个 渲染上下文。这个方法返回一个带有绘图 API 的对象。

常见的上下文类型：

• '2d': 提供 Canvas 2D API，用于绘制二维图形、文本和图像。
• 'webgl': 提供 WebGL 1 API，用于硬件加速的二维和三维图形。
• 'webgl2': 提供 WebGL 2 API，基于 OpenGL ES 3.0，提供更高级的功能。
• 'bitmaprenderer': 用于以低开销将 ImageBitmap 对象传输到 canvas。

示例 - 获取 2D 上下文

此示例获取 2D 上下文并绘制简单的文本。

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="400" height="150"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        if (ctx) {
            ctx.font = '20pt Arial';
            ctx.fillStyle = 'blue';
            ctx.fillText('Hello Canvas 2D!', 50, 50);
        } else {
            console.error('2D context not supported');
        }
    </script>
</body>
</html>

预期结果：

在 canvas 上以蓝色显示文本“Hello Canvas 2D!”。

获取 WebGL 上下文

对于 WebGL 应用程序，您需要请求 'webgl' 或 'webgl2' 上下文。检查上下文是否成功获取是一个好习惯，因为浏览器或硬件可能不支持 WebGL。

示例 - 获取 WebGL 上下文

<!DOCTYPE html>
<html>
<body>
    <canvas id="my_canvas" width="300" height="200"></canvas>

    <script>
        const canvas = document.getElementById('my_canvas');
        let gl = canvas.getContext('webgl'); // Try WebGL 1 first

        if (!gl) {
            console.log('WebGL 1 not supported, trying WebGL 2...');
            gl = canvas.getContext('webgl2'); // Try WebGL 2 if WebGL 1 failed
        }

        if (gl) {
            console.log('WebGL context obtained successfully!');
            // Set clear color to light grey and clear the canvas
            gl.clearColor(0.9, 0.9, 0.8, 1.0); // RGBA
            gl.clear(gl.COLOR_BUFFER_BIT);
            // ... further WebGL setup and rendering ...
        } else {
            alert('WebGL is not supported by your browser/device.');
        }
    </script>
</body>
</html>

预期结果：

如果支持 WebGL，这将显示一个清除为浅灰色的空白 canvas。控制台将记录一条消息。

canvas 元素提供了必要的绘制表面，而请求适当的 WebGL 上下文是构建任何 WebGL 应用程序的第一步。