class javascript canvas 中的线旋转

Question

我尝试创建一个 class，其功能可能用于更改已绘制的线的角度。
用我写的，线不动。当我按向右或向左键时，出现此错误：

TypeError: this.changeAngle is not a function

确实，我的代码中没有 "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

主要变化：

向 thr constructor() 添加了 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>

class javascript canvas 中的线旋转

line rotation in class javascript canvas

html

javascript

canvas

rotation