如何在Processing.js中消除后续处理代码的变换效果叠加？

嘿，别担心！作为Processing.js新手碰到这种变换叠加的问题太正常了，完全不用致歉～

你遇到的核心问题是：Processing.js里的变换操作（比如scale()、rotate()、translate()）是累积生效的——每一次变换都会基于当前的坐标系状态进行修改，后续所有图形都会使用这个更新后的坐标系来绘制。比如连续两次调用scale(2)，第二次的放大是在第一次放大2倍的基础上再放大2倍，最终图形会被放大4倍，而不是两次独立的2倍。

解决这个问题的关键工具是pushMatrix()和popMatrix()，它们能帮你隔离不同图形的变换状态：

• pushMatrix()：调用这个函数会保存当前的坐标系状态（相当于拍一张当前坐标系的快照）。
• popMatrix()：调用这个函数会恢复到最近一次push保存的坐标系状态，让后续的绘图操作回到之前的“干净”状态。

举个简单的例子对比：

错误的叠加效果代码 #

// 第一次变换：放大2倍
scale(2);
rect(10, 10, 50, 50); // 这个矩形被放大2倍

// 第二次变换：继续放大2倍，基于之前的坐标系
scale(2);
rect(100, 10, 50, 50); // 这个矩形会被放大4倍（2*2）

修正后的独立变换代码 #

// 绘制第一个矩形：独立放大2倍
pushMatrix(); // 保存初始坐标系
scale(2);
rect(10, 10, 50, 50); // 仅在这个变换环境中生效
popMatrix(); // 回到初始坐标系，清除之前的放大效果

// 绘制第二个矩形：同样独立放大2倍
pushMatrix(); // 再次保存初始坐标系
scale(2);
rect(100, 10, 50, 50); // 不受第一个矩形变换的影响，也是放大2倍
popMatrix();

这个方法同样适用于旋转、平移等其他变换操作，甚至可以嵌套使用（比如绘制动物的头部时，先平移到头部位置，再旋转头部，然后用push/pop隔离眼睛的变换），能帮你轻松控制每个部位的独立变换，不会互相干扰。

内容的提问来源于stack exchange，提问作者SheepeyDarkness