Почему изображение исчезает при использовании requestAnimationFrame? - PullRequest
Новая
       53

Почему изображение исчезает при использовании requestAnimationFrame?

0 голосов
/ 22 января 2020

Я рисую canvas и добавляю Plane. canvas и Plane работают, когда я использую setInterval(), но если я использую requestAnimationFrame(), Plane исчезает. Изображение Plane является локальным, и его положение зависит от положения мыши. 

const canvas = this.refs.canvas
const contex = canvas.getContext('2d')

function DrawBoard() {
  contex.fillStyle = "black"
  contex.fillRect(0, 0, 1200, 350)
}

function Plane() {
  const image1 = new Image()
  image1.src = "Plane.png"
  image1.onload = function () {
    contex.drawImage(image1, planeX - 110, planeY - 90, 200, 160);
    }
}

function Game() {
  DrawBoard()
  Plane()
}

function Animate() {
  Game()
  window.requestAnimationFrame(Animate)
}

Animate()

1 Ответ

1 голос
/ 22 января 2020

Это, скорее всего, связано с тем, что вы загружаете изображение плоскости каждые l oop и рисуете его в обработчике onload. Это вызовет async на вызов Plane() после загрузки изображения (даже если оно загружено из кэша). Рисование здесь означает, что оно рисуется async для вашего рендера l oop, и вы не контролируете свой порядок рисования.

Вместо этого вам следует загрузить изображение перед началом рендеринга и повторно использовать это повсюду. Например: 

const canvas = this.refs.canvas
const contex = canvas.getContext('2d')
const image1 = new Image()

function DrawBoard() {
  contex.fillStyle = "black"
  contex.fillRect(0, 0, 1200, 350)
}

function Plane() {
  contex.drawImage(image1, planeX - 110, planeY - 90, 200, 160);
}

function Game() {
  DrawBoard()
  Plane()
}

function Animate() {
  Game()
  window.requestAnimationFrame(Animate)
}

// Start the animation after the plane image is loaded
image1.onload = function () {
  Animate()
}
image1.src = "Plane.png"
...