画布元素 - 2D 绘图 - 图形的变换操作

在 HTML5 中，<canvas> 元素为我们提供了强大的 2D 绘图功能。通过它，我们可以创建各种复杂的图形和动画。而图形的变换操作则是让我们能够更加灵活地控制图形的位置、大小和角度的重要手段。本文将详细介绍 HTML5 画布中 2D 绘图的图形变换操作，并给出相应的演示代码。

一、`<canvas>` 元素基础

在开始介绍图形变换之前，我们先来简单回顾一下 <canvas> 元素的基本使用。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Basics</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 2D 绘图上下文
        const ctx = canvas.getContext('2d');
        // 绘制一个矩形
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

在上述代码中，我们首先创建了一个 <canvas> 元素，然后通过 getContext('2d') 方法获取 2D 绘图上下文。最后，使用 fillRect 方法绘制了一个蓝色的矩形。

二、图形的变换操作

1. 平移（translate）

平移操作可以改变画布的原点位置。translate(x, y) 方法将画布的原点移动到 (x, y) 坐标处。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Translate</title>
</head>
<body>
    <canvas id="translateCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('translateCanvas');
        const ctx = canvas.getContext('2d');
        // 绘制原始矩形
        ctx.fillStyle = 'red';
        ctx.fillRect(50, 50, 100, 100);
        // 平移画布
        ctx.translate(150, 0);
        // 绘制平移后的矩形
        ctx.fillStyle = 'green';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

在这个例子中，我们先绘制了一个红色的矩形，然后使用 translate(150, 0) 将画布的原点向右移动了 150 个单位，接着绘制了一个绿色的矩形。可以看到，绿色矩形相对于红色矩形向右平移了 150 个单位。

2. 旋转（rotate）

旋转操作可以让图形绕着画布的原点旋转。rotate(angle) 方法接受一个弧度值作为参数，表示旋转的角度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Rotate</title>
</head>
<body>
    <canvas id="rotateCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('rotateCanvas');
        const ctx = canvas.getContext('2d');
        // 移动到画布中心
        ctx.translate(200, 200);
        // 绘制原始矩形
        ctx.fillStyle = 'blue';
        ctx.fillRect(-50, -50, 100, 100);
        // 旋转画布 45 度（转换为弧度）
        ctx.rotate(Math.PI / 4);
        // 绘制旋转后的矩形
        ctx.fillStyle = 'yellow';
        ctx.fillRect(-50, -50, 100, 100);
    </script>
</body>
</html>

在这个例子中，我们先将画布的原点移动到画布的中心，然后绘制了一个蓝色的矩形。接着使用 rotate(Math.PI / 4) 将画布旋转了 45 度，最后绘制了一个黄色的矩形。可以看到，黄色矩形相对于蓝色矩形旋转了 45 度。

3. 缩放（scale）

缩放操作可以改变图形的大小。scale(x, y) 方法接受两个参数，分别表示在 x 轴和 y 轴上的缩放比例。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Scale</title>
</head>
<body>
    <canvas id="scaleCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('scaleCanvas');
        const ctx = canvas.getContext('2d');
        // 绘制原始矩形
        ctx.fillStyle = 'purple';
        ctx.fillRect(50, 50, 100, 100);
        // 缩放画布
        ctx.scale(2, 2);
        // 绘制缩放后的矩形
        ctx.fillStyle = 'orange';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

在这个例子中，我们先绘制了一个紫色的矩形，然后使用 scale(2, 2) 将画布在 x 轴和 y 轴上都放大了 2 倍，接着绘制了一个橙色的矩形。可以看到，橙色矩形的大小是紫色矩形的 4 倍。

三、变换操作的组合使用

我们可以将平移、旋转和缩放操作组合使用，以实现更加复杂的图形变换效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Combined Transformations</title>
</head>
<body>
    <canvas id="combinedCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('combinedCanvas');
        const ctx = canvas.getContext('2d');
        // 平移画布
        ctx.translate(200, 200);
        // 旋转画布 30 度（转换为弧度）
        ctx.rotate(Math.PI / 6);
        // 缩放画布
        ctx.scale(1.5, 1.5);
        // 绘制矩形
        ctx.fillStyle = 'pink';
        ctx.fillRect(-50, -50, 100, 100);
    </script>
</body>
</html>

在这个例子中，我们先将画布的原点移动到画布的中心，然后将画布旋转了 30 度，接着将画布在 x 轴和 y 轴上都放大了 1.5 倍，最后绘制了一个粉色的矩形。

四、总结

变换操作	方法	描述
平移	`translate(x, y)`	将画布的原点移动到 `(x, y)` 坐标处
旋转	`rotate(angle)`	让图形绕着画布的原点旋转 `angle` 弧度
缩放	`scale(x, y)`	在 x 轴和 y 轴上分别按 `x` 和 `y` 的比例缩放图形

通过这些图形变换操作，我们可以在 HTML5 画布中创建出更加丰富多样的图形和动画效果。希望本文能帮助你更好地掌握 HTML5 画布的 2D 绘图中的图形变换操作。

画布元素 - 2D 绘图 - 图形的变换操作