Javascript p5.js如何停止某些元素的旋转

我在p5.js中绘制了一些旋转矩形，一切正常。然后我需要一些文本显示在矩形的顶部，我希望它是静止的。然而，文本也在旋转。我尝试过一些解决方案，比如将旋转（0）或值设置为负数，以使最后绘制的矩形旋转，但没有任何效果

class Rectangle {
    constructor(size, colorR, colorG, colorB, angle) {
        this.size = size;
        this.colorR = colorR;
        this.colorG = colorG;
        this.colorB = colorB;
        this.angle = angle;
        this.actualAngle = this.angle;
    }

    draw() {
        stroke(0);
        strokeWeight(2);
        fill(this.colorR, this.colorG, this.colorB);
        rotate(this.actualAngle);
        rect(0, 0, this.size, this.size);
    }

    increaseAngle() {
        this.actualAngle += this.angle;
    }

    getActualAngle(){
        return this.actualAngle;
    }
}

var rectangles = [];

 function setup() {
    var canvas1 = createCanvas(800, 700);
    canvas1.parent("regLog");
    var size = 12;
    for (var i = 0; i < 10; i++) {
        let ranR = random(150);
        let ranG = random(150);
        let ranB = random(150);
        let angle = random(-0.005, 0.005);
        rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
        size += 50;
    }
}

function draw() {
    background(255);

    rectMode(CENTER);
    translate(width / 2, height / 2);
    for (var i = rectangles.length - 1; i > 0; i--) {
        rectangles[i].draw();
    }

    if (second() % 1 == 0) {
        for (let i = 0; i < rectangles.length; i++) {
            rectangles[i].increaseAngle();
        }
    }

    rotate(0);
    noStroke();
    fill(255, 255, 255, 0);    
    rect(0, 0, 50, 50);
    textAlign(CENTER);
    fill(255);
    textSize(60);
    text("Coming soon!", 0, 0);
}

类矩形{
构造函数（大小、颜色、颜色G、颜色B、角度）{
这个。大小=大小；
this.colorR=colorR；
this.colorG=colorG；
this.colorB=colorB；
这个角度=角度；
this.actualAngle=this.angle；
}
画（）{
冲程（0）；
冲程重量（2）；
填充（this.colorR、this.colorG、this.colorB）；
旋转（此为实际值）；
rect（0，0，this.size，this.size）；
}
增量角度（）{
this.actualAngle+=this.angle；
}
getActualLangle（）{
返回这个.ActualLangle；
}
}
var矩形=[]；
函数设置（）{
var canvas1=createCanvas（800700）；
游说1.母公司（“regLog”）；
变量大小=12；
对于（变量i=0；i<10；i++）{
设ranR=random（150）；
设ranG=random（150）；
设ranB=random（150）；
让角=随机（-0.005，0.005）；
矩形。推（新矩形（大小、范围、范围、范围、角度））；
尺寸+=50；
}
}
函数绘图（）{
背景（255）；
矩形模式（中心）；
平移（宽度/2，高度/2）；
对于（var i=rectangles.length-1；i>0；i--）{
矩形[i].draw（）；
}
如果（第二个（）%1==0）{
for（设i=0；i

我使用push（）来“保存”当前旋转设置，然后在每次绘制矩形后使用pop（）来恢复它们。使用rotate（）时，它会旋转将来绘制的所有形状，因此更改是“永久的”，除非您非常小心地重置

您可以在这个JSFIDLE中看到它的工作原理->

我注释掉了一部分，您只为JSFIDLE分配了一个父项，以便在复制粘贴到任何内容之前取消对它的注释

class Rectangle {
    constructor(size, colorR, colorG, colorB, angle) {
        this.size = size;
        this.colorR = colorR;
        this.colorG = colorG;
        this.colorB = colorB;
        this.angle = angle;
        this.actualAngle = this.angle;
    }

    draw() {
        /*push here*/
        push();
        stroke(0);
        strokeWeight(2);
        fill(this.colorR, this.colorG, this.colorB);
        rotate(this.actualAngle);
        rect(0, 0, this.size, this.size);
        /*pop here*/
        pop();
    }

    increaseAngle() {
        this.actualAngle += this.angle;
    }

    getActualAngle(){
        return this.actualAngle;
    }
}

var rectangles = [];

 function setup() {
    var canvas1 = createCanvas(800, 700);
/*     canvas1.parent("regLog"); */
    var size = 12;
    for (var i = 0; i < 10; i++) {
        let ranR = random(150);
        let ranG = random(150);
        let ranB = random(150);
        let angle = random(-0.005, 0.005);
        rectangles.push(new Rectangle(size, ranR, ranG, ranB, angle));
        size += 50;
    }
}

function draw() {
    background(255);

    rectMode(CENTER);
    translate(width / 2, height / 2);
    for (var i = rectangles.length - 1; i > 0; i--) {
        rectangles[i].draw();
    }

    if (second() % 1 == 0) {
        for (let i = 0; i < rectangles.length; i++) {
            rectangles[i].increaseAngle();
        }
    }

    rotate(0);
    noStroke();
    fill(255, 255, 255, 0);    
    rect(0, 0, 50, 50);
    textAlign(CENTER);
    fill(255);
    textSize(60);
    text("Coming soon!", 0, 0);
}

类矩形{
构造函数（大小、颜色、颜色G、颜色B、角度）{
这个。大小=大小；
this.colorR=colorR；
this.colorG=colorG；
this.colorB=colorB；
这个角度=角度；
this.actualAngle=this.angle；
}
画（）{
/*推这里*/
推（）；
冲程（0）；
冲程重量（2）；
填充（this.colorR、this.colorG、this.colorB）；
旋转（此为实际值）；
rect（0，0，this.size，this.size）；
/*过来*/
pop（）；
}
增量角度（）{
this.actualAngle+=this.angle；
}
getActualLangle（）{
返回这个.ActualLangle；
}
}
var矩形=[]；
函数设置（）{
var canvas1=createCanvas（800700）；
/*游说1.母公司（“regLog”）*/
变量大小=12；
对于（变量i=0；i<10；i++）{
设ranR=random（150）；
设ranG=random（150）；
设ranB=random（150）；
让角=随机（-0.005，0.005）；
矩形。推（新矩形（大小、范围、范围、范围、角度））；
尺寸+=50；
}
}
函数绘图（）{
背景（255）；
矩形模式（中心）；
平移（宽度/2，高度/2）；
对于（var i=rectangles.length-1；i>0；i--）{
矩形[i].draw（）；
}
如果（第二个（）%1==0）{
for（设i=0；i

非常感谢！函数旋转整个画布而不是绘制元素，这不是有点奇怪吗？这是怎么回事还是某种错误？哦，对不起，我想我真的不清楚，但它不会旋转画布，而是会从那一点开始改变形状的显示方式。但是，由于多次调用rotate（rotate 10+rotate 20=rotate 30）会更改“stack”，我通常将其视为正在旋转的画布，因为这就像转动一张纸。要清楚的是，它不会旋转画布，这只是我在措辞上的一个错误！！对不起，那是我的错，我真的很高兴你抓到了。没问题！另外，我昨天考虑了你的问题，意识到你的问题是调用rotate（0）不会将当前旋转设置为0，它只是将当前旋转添加到0。所以如果你有旋转（70）和旋转（0），它仍然是旋转（70）。如果你说的是真的，旋转（-70）应该是旋转0，对吗？我很好奇，因为我已经试过了，但没有成功。我对文本的旋转函数做了类似的操作：旋转（-（矩形[rectangles.length-1]）；为什么只减去最后一个矩形的旋转呢？看起来每次你画一个矩形的时候，旋转都被调用。所以在你的forloop之后，你必须解释并减去每一个旋转，因为它们叠加在一起。