类javascript画布中的线条旋转

debugcn 发表于 Dev

文森特·波登

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

类型错误：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);
}
}

恩克萨内塔

主要变化：

将 this.angle 添加到 thr 构造函数()
使用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);
}
}