p5.js |旋转()函数

p5.js库是一个流行的JavaScript创意编程库，它使用简单易学的API，使人们能够快速地创建基于浏览器的交互式图形和动画。 p5.js旋转()函数是p5.js库中的一个方法，该方法允许您在2D平面内旋转形状。在这篇文章中，我们将深入探讨p5.js旋转()函数的工作原理，以及如何使用它在您的p5.js项目中创建旋转形状。

语法

在让我们开始在p5.js中使用旋转()函数之前，我们需要熟悉它的语法和参数。旋转()函数采用一个参数，该参数是表示旋转角度的弧度值。这是旋转()函数的语法：

rotate(angle)

其中angle表示旋转角度的弧度值。默认情况下，所有的旋转都是相对于画布的左上角（0,0）点的。

示例

让我们看一个旋转()函数的示例，其中我们将旋转矩形，并在页面上显示出来。下面是代码部分：

function setup() {
  createCanvas(600, 400);
  rectMode(CENTER);
}

function draw() {
  background(220);

  //将原点移到画布的中心
  translate(width/2, height/2);

  //旋转45度
  rotate(radians(45));

  //矩形
  rect(0, 0, 100, 100);
}

解释一下代码：在setup()函数中，我们创建了一个600x400像素的画布，并将矩形的rectMode设置为CENTER。在draw()函数中，我们在画布的中心点的位置上开始了绘制。然后我们使用rotate()函数将矩形旋转45度。最后，我们在原点绘制了一个矩形。

运行代码后，我们会看到一个旋转了45度的矩形，如下图所示：

旋转的局限性

需要说明的是，其实旋转函数并不是真正的旋转一个形状，而是将整个画布旋转了一个特定角度。这就意味着，当你旋转后再绘制其他形状时，它们会出现在旋转方向上。要解决这个问题，可以使用push()方法保存当前画布状态，并使用pop()方法恢复画布状态。下面的代码演示了如何使用push()和pop()来解决这个问题：

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(200);

  //将原点移到画布的中心
  translate(width/2, height/2);

  //旋转90度
  rotate(radians(90));

  push(); //保存当前画布状态
  stroke(255, 0, 0);
  line(0, 0, 0, -200);
  pop(); //恢复画布状态

  push(); //再保存一次
  stroke(0, 0, 255);
  line(0, 0, -200, 0);
  pop();
}

运行这段代码之后，我们将获得以下结果：

到这里，您已经了解了p5.js旋转()函数的基本语法和用法，并使用示例代码演示了如何在您的p5.js项目中使用它。祝您好运！