时间戳

首页 > 解决方案 > 类javascript画布中的线旋转

javascript - 类javascript画布中的线旋转

问题描述


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

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

标签： javascripthtmlcanvasrotation

解决方案

主要变化：

  • 将 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>

推荐阅读