类javascript画布中的线旋转

Question

我尝试创建一个具有可用于更改已绘制线的角度的函数的类。
用我写的东西，这条线不动。当我按向右键或向左键时，出现此错误：

TypeError: this.changeAngle 不是函数

确实，我的代码中没有“function”关键字……我不知道该用什么代替。

你能帮我吗？
非常感谢。

window.onload = init;

let canvas, ctx;
let mousePos;
let angle = 0;


class Lanceur {
  constructor() {    
    this.changeAngle(this.angle);
  }

  update(ctx) {
    this.drawAiguille(ctx);
  }

  drawSocleLanceur(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(w/2, h, 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
}

  drawAiguille(ctx) {
    ctx.save();
    ctx.rotate(this.angle);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.lineWidth=3;
    ctx.beginPath();
    ctx.moveTo(w/2, h-h*0.12);
    ctx.lineTo(w/2, h-h*0.035);
    ctx.stroke();
    ctx.restore();
  }


  changeAngle(a) {
      this.angle =  a;
  }

  getAngle() {
      return this.angle;
  }

}

function init() {
  canvas = document.querySelector("#jeu");
  ctx = canvas.getContext("2d");

  w = canvas.width;
  h = canvas.height;

  a = new Lanceur();
      requestAnimationFrame(mainloop);
  }

function mainloop() {
  ctx.clearRect(0, 0, w, h);
  a.update(ctx);
  requestAnimationFrame(mainloop);
}

document.addEventListener('keypress',  function(event){
    gereTouches(event);
});


function gereTouches(event) {
  if(event.key == "ArrowRight") {
    this.changeAngle(this.getAngle - 1);
      console.log("ça bouge : " + this.angle);
  }else if(event.key == "ArrowLeft") {
    this.changeAngle(this.getAngle + 1);
}
}

Answer 1

主要变化：

• 将 this.angle 添加到构造函数（）中
• 使用keydown事件
• 函数 gereTouches(event) 使用 a 代替 this 和 a.getAngle() 代替 a.getAngle
• 还有 1 表示角度太大（那些是弧度）。我改用 .01。

希望对你有帮助。

window.onload = init;

let canvas, ctx;
let mousePos;
let angle = 0;


class Lanceur {
  constructor() { 
    this.angle = 0;
    this.changeAngle(this.angle);
  }

  update(ctx) {
    this.drawAiguille(ctx);
  }

  drawSocleLanceur(ctx) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(w/2, h, 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.restore();
}

  drawAiguille(ctx) {
    ctx.save();
    ctx.rotate(this.angle);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.lineWidth=3;
    ctx.beginPath();
    ctx.moveTo(w/2, h-h*0.12);
    ctx.lineTo(w/2, h-h*0.035);
    ctx.stroke();
    ctx.restore();
  }


  changeAngle(a) {
      this.angle =  a;
  }

  getAngle() {
      return this.angle;
  }

}

function init() {
  canvas = document.querySelector("#jeu");
  ctx = canvas.getContext("2d");

  w = canvas.width = 500;
  h = canvas.height = 500;

  a = new Lanceur();
  requestAnimationFrame(mainloop);
  }

function mainloop() {
  ctx.clearRect(0, 0, w, h);
  a.update(ctx);
  requestAnimationFrame(mainloop);
}

document.addEventListener('keydown',  function(event){
  
    gereTouches(event);
});


function gereTouches(event) {
  if(event.key == "ArrowRight") {
    a.changeAngle(a.getAngle() - .01);
      console.log("ça bouge : " + a.angle);
  }else if(event.key == "ArrowLeft") {
    a.changeAngle(a.getAngle() + .01);
}
}

canvas{border:1px solid}

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