Saya ingin x dan y bertambah 1 di setiap requestAnimationFrame, itu hanya meningkat sekali

https://jsfiddle.net/2mzb7axu/1/

update(ctx) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    this.x++
    this.y++
    ctx.lineTo(this.x, this.y);
    ctx.lineWidth = 5;
    ctx.stroke();
  }

1
John Reeve 7 Maret 2020, 23:10

1 menjawab

Jawaban Terbaik

Fungsi animate Anda memulai konstruktor Line dengan setiap panggilan update. Coba inisiasi kelas Line pada konstruktor Display, seperti ini:

constructor() {
    this.canvas = document.querySelector("#canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.animateBound = this.animate.bind(this);

    this.line = new Line();
}

Dan dalam fungsi update Anda, panggil instance Line yang ada:

animate() {
    this.line.update(this.ctx);
    console.log('Animate called');
    requestAnimationFrame(this.animateBound);
}
2
TamirNahum 7 Maret 2020, 20:30