无法在 p5.js 中旋转矩形

Question

我正在尝试在 p5.js 中创建一个小汽车模拟器，它可以鸟瞰轨道。到目前为止，我已经能够创造汽车并让它移动（向上、向下、向左、向右），但这不是你在现实生活中的驾驶方式。我只需要能够前进、后退和旋转汽车，同时朝这两个方向行驶即可转向。

到目前为止我所做的：

sketch.js

// Declares global variables
const h = window.innerHeight;
const w = window.innerWidth;
var car;
var borders = [];
var pos = {
    x: 200, 
    y: 200,
    angle: 0
}

function setup () {

    // Creates the canvas
    background ( '#000000' );
    createCanvas ( 400, 400 );
    angleMode ( DEGREES );
    rectMode ( CENTER );
    stroke ( 255 );

    // Creates the car 
    car = new Car();

}

function draw () {

    // Clears the canvas
    background ( '#000000' );

    // Moves the car 
    if ( keyIsDown ( UP_ARROW ) ) {
        pos.y -= 2;
    } 

    if ( keyIsDown ( RIGHT_ARROW ) ) {
        
        pos.angle += 2;

    }

    if ( keyIsDown ( DOWN_ARROW ) ) {
        pos.y += 2;
    }

    if ( keyIsDown ( LEFT_ARROW ) ) {

        pos.angle -= 2;

    }

    // Displays the car on the canvas
    translate(pos.x, pos.y);
    rotate(pos.angle);
    car.show();

}

和汽车类

class Car {

    // Defines the class
    constructor ( ) {

        this.pos = createVector ( 0, 0 );
        this.width = 10;
        this.length = 20;

    }

    // Displays the car on the canvas
    show () {
        rect ( this.pos.x, this.pos.y, this.width, this.length );
    }

}

当我运行这段代码时，我可以前进和后退，但是当我尝试转向和前进时，我只是向上走，而不是汽车面对的方向。

我知道为什么会发生这种情况（Y 轴与汽车的旋转无关），但我不知道如何以其他方式做到这一点。