HTML canvas transform() 方法（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML Canvas 提供了强大的图形绘制能力，而 transform() 方法则是实现动态视觉效果的核心工具之一。无论是旋转、缩放、平移还是更复杂的坐标系变换，transform() 方法都能帮助开发者轻松实现。本文将从基础概念出发，通过形象比喻和实际案例，深入讲解 transform() 方法的使用技巧，帮助读者掌握这一强大的功能。

一、理解 HTML Canvas 的坐标系统

1.1 什么是 Canvas 的坐标系统？

HTML Canvas 的 2D 上下文（CanvasRenderingContext2D）默认以画布的左上角为原点（0, 0），X 轴向右延伸，Y 轴向下延伸。开发者可以通过 transform() 方法修改这一坐标系，从而实现图形的变形。

比喻：
想象画布是一个舞台，而 transform() 方法就像舞台上的导演，可以指挥舞者（图形）旋转、移动或放大缩小。

1.2 坐标变换的直观意义

通过 transform() 方法，开发者可以改变画布的“视角”。例如：

• 平移：将整个舞台向左或向右移动。
• 旋转：让舞台绕某个点旋转一定角度。
• 缩放：放大或缩小舞台上的所有元素。

二、transform() 方法的核心函数详解

2.1 translate(x, y)：移动坐标系

translate() 方法用于将坐标系的原点移动到新的位置。例如：

context.translate(100, 100); // 将原点移动到 (100, 100)
context.fillRect(0, 0, 50, 50); // 实际绘制位置为 (100, 100) 到 (150, 150)

比喻：
translate() 好比将整个舞台向右移动了 100 个单位，向下方移动了 100 个单位，所有后续绘制操作都会基于新的原点。

2.2 rotate(angle)：旋转坐标系

rotate() 方法以当前原点为中心，旋转坐标系。旋转角度以弧度为单位，例如：

context.rotate(Math.PI / 4); // 旋转 45 度（π/4 弧度）
context.fillRect(50, 50, 50, 50); // 矩形会以原点为中心旋转 45 度

注意：
旋转方向遵循“左手坐标系”规则——正角度表示顺时针旋转。

2.3 scale(x, y)：缩放坐标系

scale() 方法调整坐标系的缩放比例。例如：

context.scale(2, 0.5); // X 轴放大 2 倍，Y 轴缩小至 1/2  
context.fillRect(50, 50, 50, 50); // 实际绘制的矩形宽 100，高 25

比喻：
scale() 好比通过放大镜观察画布，X 轴方向被拉长，Y 轴方向被压缩。

2.4 transform() 和 setTransform()：直接操作变换矩阵

Canvas 的变换本质上是通过矩阵运算实现的。transform(a, b, c, d, e, f) 和 setTransform(a, b, c, d, e, f) 允许直接设置变换矩阵的参数：

区别：

• transform() 是对当前变换矩阵的叠加操作。
• setTransform() 会重置并直接设置新的变换矩阵。

三、复合变换的注意事项

3.1 变换的顺序至关重要

Canvas 的变换是按**栈（Stack）**的方式进行的。例如：

context.translate(100, 100); // 先平移  
context.rotate(Math.PI / 4); // 再旋转  

此时，旋转是以新的原点（100, 100）为中心进行的。如果顺序调换：

context.rotate(Math.PI / 4); // 先旋转  
context.translate(100, 100); // 再平移  

平移的方向会受到旋转的影响，导致最终位置不同。

比喻：
变换的顺序就像给物体套上多个“变形环”，每个环的顺序会直接影响最终效果。

3.2 使用 save() 和 restore() 保存状态

为了避免变换对后续绘制的影响，可以使用 save() 和 restore() 方法：

context.save(); // 保存当前变换状态  
context.translate(100, 100);  
// 绘制旋转的图形  
context.restore(); // 恢复之前的变换状态  

四、实际案例：绘制动态旋转的星形

4.1 案例目标

创建一个随时间旋转并缩放的五角星，展示 rotate() 和 scale() 的组合使用。

4.2 实现步骤

1. 绘制五角星的路径。
2. 使用 requestAnimationFrame 实现动画循环。
3. 在每一帧中动态调整旋转角度和缩放比例。

代码示例：

const canvas = document.getElementById("myCanvas");  
const context = canvas.getContext("2d");  

function drawStar() {  
  context.clearRect(0, 0, canvas.width, canvas.width);  
  context.save();  

  // 移动坐标系到画布中心  
  context.translate(canvas.width / 2, canvas.height / 2);  

  // 动态旋转角度（基于时间）  
  const time = Date.now() / 1000;  
  const angle = time * Math.PI * 2;  
  context.rotate(angle);  

  // 动态缩放比例  
  const scaleValue = 0.5 + 0.5 * Math.sin(angle);  
  context.scale(scaleValue, scaleValue);  

  // 绘制星形路径  
  context.beginPath();  
  context.moveTo(0, -50);  
  for (let i = 0; i < 5; i++) {  
    context.lineTo(  
      30 * Math.sin((i * 2 + 1) * Math.PI / 5),  
      -30 * Math.cos((i * 2 + 1) * Math.PI / 5)  
    );  
  }  
  context.closePath();  
  context.fillStyle = "gold";  
  context.fill();  

  context.restore();  
  requestAnimationFrame(drawStar);  
}  

drawStar();  

效果：
五角星会以中心为轴心匀速旋转，并随时间周期性缩放，形成动态视觉效果。

五、进阶技巧与最佳实践

5.1 性能优化建议

• 减少频繁变换：避免在每一帧中重复调用 save() 和 restore()，可将多次变换合并为一个矩阵。
• 使用离屏 Canvas：对于复杂变换，可先在隐藏的 Canvas 中绘制，再通过 drawImage() 合成到主画布。

5.2 常见问题与解决方案

• 变换叠加导致坐标混乱：使用 context.setTransform() 重置变换矩阵。
• 旋转中心点不准确：通过 translate() 将原点移动到目标中心点后再旋转。

结论：掌握 transform() 的无限可能

通过本文，我们深入探讨了 HTML Canvas 的 transform() 方法，从基础函数到复合变换，再到实际案例，逐步展示了如何利用这一工具实现动态视觉效果。无论是开发小游戏、数据可视化工具，还是创意动画，transform() 方法都是不可或缺的“变形魔法”。

鼓励读者动手实践，尝试组合不同的变换函数，探索更多可能性。记住，Canvas 的变换系统如同一把精密的瑞士军刀——理解其原理后，它将成为你网页开发中的得力助手。