• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:23:02

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

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

一、<canvas> 元素基础

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

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Basics</title>
  8. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="400" height="400"></canvas>
  12.     <script>
  13.         // 获取 canvas 元素
  14.         const canvas = document.getElementById('myCanvas');
  15.         // 获取 2D 绘图上下文
  16.         const ctx = canvas.getContext('2d');
  17.         // 绘制一个矩形
  18.         ctx.fillStyle = 'blue';
  19.         ctx.fillRect(50, 50, 100, 100);
  20.     </script>
  21. </body>
  23. </html>

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

二、图形的变换操作

1. 平移（translate）

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

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Translate</title>
  8. </head>
  10. <body>
  11.     <canvas id="translateCanvas" width="400" height="400"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('translateCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 绘制原始矩形
  17.         ctx.fillStyle = 'red';
  18.         ctx.fillRect(50, 50, 100, 100);
  20.         // 平移画布
  21.         ctx.translate(150, 0);
  23.         // 绘制平移后的矩形
  24.         ctx.fillStyle = 'green';
  25.         ctx.fillRect(50, 50, 100, 100);
  26.     </script>
  27. </body>
  29. </html>

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

2. 旋转（rotate）

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

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Rotate</title>
  8. </head>
  10. <body>
  11.     <canvas id="rotateCanvas" width="400" height="400"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('rotateCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 移动到画布中心
  17.         ctx.translate(200, 200);
  19.         // 绘制原始矩形
  20.         ctx.fillStyle = 'blue';
  21.         ctx.fillRect(-50, -50, 100, 100);
  23.         // 旋转画布 45 度（转换为弧度）
  24.         ctx.rotate(Math.PI / 4);
  26.         // 绘制旋转后的矩形
  27.         ctx.fillStyle = 'yellow';
  28.         ctx.fillRect(-50, -50, 100, 100);
  29.     </script>
  30. </body>
  32. </html>

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

3. 缩放（scale）

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

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Scale</title>
  8. </head>
  10. <body>
  11.     <canvas id="scaleCanvas" width="400" height="400"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('scaleCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 绘制原始矩形
  17.         ctx.fillStyle = 'purple';
  18.         ctx.fillRect(50, 50, 100, 100);
  20.         // 缩放画布
  21.         ctx.scale(2, 2);
  23.         // 绘制缩放后的矩形
  24.         ctx.fillStyle = 'orange';
  25.         ctx.fillRect(50, 50, 100, 100);
  26.     </script>
  27. </body>
  29. </html>

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

三、变换操作的组合使用

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

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Combined Transformations</title>
  8. </head>
  10. <body>
  11.     <canvas id="combinedCanvas" width="400" height="400"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('combinedCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 平移画布
  17.         ctx.translate(200, 200);
  19.         // 旋转画布 30 度（转换为弧度）
  20.         ctx.rotate(Math.PI / 6);
  22.         // 缩放画布
  23.         ctx.scale(1.5, 1.5);
  25.         // 绘制矩形
  26.         ctx.fillStyle = 'pink';
  27.         ctx.fillRect(-50, -50, 100, 100);
  28.     </script>
  29. </body>
  31. </html>

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

四、总结

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

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