如何阻止画布添加到旋转中？

Question

我试图让一个矩形在游戏循环中逆时针旋转 10 度。我希望盒子只旋转 10 度。不要在下一个循环中再增加 10 度，因为这就是它正在做的事情：

• First iteration of Game Loop
• Second Iteration of Game Loop

这是我目前的绘图功能：

...

class Bok {
    static width = 17;
    static height = 12;

    constructor(position) {
        this.position = position;
    }

    draw() {
        ...

        ctx.beginPath();
        ctx.rect(this.position.x, this.position.y, 17, 12);
        ctx.fillStyle = "red";
        ctx.strokeStyle = "black";
        ctx.lineWidth = 10;

        ctx.translate(this.position.x + Bok.width / 2, this.position.y + Bok.height / 2);
        // this keeps adding 10 degrees to the box every update,
        // how can i rotate it 10 degrees without adding on to the
        // previous rotation?
        ctx.rotate(10);
        ctx.translate(-(this.position.x + Bok.width / 2), -(this.position.y + Bok.height / 2));

        ctx.stroke();
        ctx.fill();

        ...
    }

...

Answer 1

首先，查看您的代码，您似乎对 API 的工作原理感到困惑。
您需要在绘制（定义）路径之前转换上下文。

现在，有很多方法可以不累积转换：

漫长的道路：执行逆变换。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();

function draw( time ) {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const delta = ((start - time) % duration) / duration;
  ctx.translate( cx, cy );
  ctx.rotate( Math.PI * 2 * delta );
  ctx.translate( -cx, -cy );
  ctx.strokeRect( cx - 20, cy - 40, 40, 80 ); 
  // inverse
  ctx.translate( cx, cy );
  ctx.rotate( Math.PI * 2 * delta * -1);
  ctx.translate( -cx, -cy );

  // an horizontal line
  ctx.fillRect(0, 80, canvas.width, 5);
  requestAnimationFrame( draw ); 
}
requestAnimationFrame( draw );

<canvas></canvas>

短而慢的方法，在绘制之前保存（），之后恢复（）。但这会保存和恢复画布上下文的所有属性，这可能有点过头了。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();

function draw( time ) {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const delta = ((start - time) % duration) / duration;

  ctx.save();
  
  ctx.translate( cx, cy );
  ctx.rotate( Math.PI * 2 * delta );
  ctx.translate( -cx, -cy );
  ctx.strokeRect( cx - 20, cy - 40, 40, 80 ); 
  
  ctx.restore();
  
  // an horizontal line
  ctx.fillRect(0, 80, canvas.width, 5);
  requestAnimationFrame( draw ); 
}
requestAnimationFrame( draw );

<canvas></canvas>

干净的方法：将上下文转换重置为单位矩阵。
这可能看起来有点复杂，但是当您的代码会增长并且您将有很多对象要管理时，将它们全部相对于单位矩阵将使您免于很多麻烦。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();

function draw( time ) {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const delta = ((start - time) % duration) / duration;
  ctx.translate( cx, cy );
  ctx.rotate( Math.PI * 2 * delta );
  ctx.translate( -cx, -cy );
  ctx.strokeRect( cx - 20, cy - 40, 40, 80 ); 

  // clear to identity transform
  ctx.setTransform(1, 0, 0, 1, 0 ,0);

  // an horizontal line
  ctx.fillRect(0, 80, canvas.width, 5);
  requestAnimationFrame( draw ); 
}
requestAnimationFrame( draw );

<canvas></canvas>

Answer 2

最简单的解决方案是为其设置触发器。

class Bok {
    static width = 17;
    static height = 12;

    constructor(position) {
        this.position = position;
        this.rotated = false;
    }

    draw() {
        ...

        ctx.beginPath();
        ctx.rect(this.position.x, this.position.y, 17, 12);
        ctx.fillStyle = "red";
        ctx.strokeStyle = "black";
        ctx.lineWidth = 10;

        ctx.translate(this.position.x + Bok.width / 2, this.position.y + Bok.height / 2);
       
        if (!this.rotated) {
        ctx.rotate(10);
        this.rotated = true;
        }
        ctx.translate(-(this.position.x + Bok.width / 2), -(this.position.y + Bok.height / 2));

        ctx.stroke();
        ctx.fill();

        ...
    }

...

添加更新的代码以根据速度旋转

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = 500;

let friction = 0.8;
let gravity = 1.5;

class Player {
  constructor() {
    this.x = 128;
    this.y = 260;
    this.w = 32;
    this.h = 32;
    this.vx = 0;
    this.vy = 0;
    this.speed = 3;
    this.color = "green";
    this.a = 0;
    this.r = this.a * (Math.PI/180);
  }
  draw() {
    ctx.save();
    ctx.fillStyle = this.color;
    ctx.translate(this.x+this.w/2, this.y+this.h/2)
    ctx.rotate(-this.r);
    ctx.fillRect(0, 0, this.w, this.h);
    ctx.restore();
  }
  update() {
    if (controller.space) {
      this.vy < 10 ? this.vy -= this.speed : this.vy = 10;
      this.a < 10 ? this.a += 0.5 : this.a = 10;
    } else {
      this.a > 0 ? this.a -= 0.5 : this.a = 0;
    }
    this.r = this.a * (Math.PI/180);
    this.vy += gravity;
    this.y += this.vy;
    this.vy *= friction;
    this.draw()
  }
  canvasCollision() {
    if (this.x <= 0) this.x = 0;
    if (this.y <= 0) this.y = 0;
    if (this.x + this.w >= canvas.width) this.x = canvas.width - this.w;
    if (this.y + this.h >= canvas.height) {
      this.y = canvas.height - this.h;
      this.vy = 0;
    }
  }
}
let player = new Player();

function handlePlayer() {
  player.draw();
  player.update();
}

class Controller {
  constructor() {
    this.space = false;

    let keyPress = (e) => {
      if (e.code === "Space") this.space = e.type === "keydown";
    };

    window.addEventListener("keydown", keyPress);
    window.addEventListener("keyup", keyPress);
  }
}
let controller = new Controller();

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = 'bold 48px serif';
  ctx.fillText("Spacebar", 100, 50);
  player.update();
  player.canvasCollision();
  requestAnimationFrame(animate);
}
animate();

<canvas id="canvas"></canvas>