Класс TypeScript .drawImage

Question

Я пытаюсь нарисовать котенка в холсте HTML5 через конструктор классов с использованием TypeScript, но я смущен тем, как достичь этой задачи. Я прокомментировал код, чтобы показать, что я пытался сделать, исходя из поведения, которое я ожидал, и того, что на самом деле работает. Большое спасибо за ваш таймер и совет.

module Game { 

    export class Test { 

     width: number; 
     height: number; 

     cellWidth: number; 
     cellHeight: number; 

     canvas: HTMLCanvasElement; 
     context: CanvasRenderingContext2D; 

     constructor() { 

      this.width = 28; 
      this.height = 31; 

      this.cellWidth = 20; 
      this.cellHeight = 20; 

      this.canvas = <HTMLCanvasElement> document.getElementById("game_canvas"); 
      this.context = this.canvas.getContext("2d"); 
      this.canvas.width = this.width * this.cellWidth; 
      this.canvas.height = this.height * this.cellHeight; 

      this.context.fillStyle = "blue"; 
      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); 

      let kitten = new Image(); 
      kitten.src = 'img/kitten.png'; 

      // When trying to draw a kitten in the canvas, 
      // this will work: 

      kitten.onload =() => { 
       this.context.drawImage(kitten, 0, 0); 
      }; 

      // but this work won't: 
      //this.context.drawImage(kitten, 0, 0); 

      /* 
      I was assuming that by accessing the this.context property 
      I would have direct access to the canvas and I will be able to use 
      drawImage to draw the kitten on it; however, that approach 
      produces no kitten in the canvas. 
      Only by using the .onload method it works. 
      I am using the() => notation so that the this inside the block 
      is referring to the class. 
      I have seen many JavasScript files in which images are simple drawn 
      through: 
      context.drawImage(image, 0, 0); 
      They are not embedded in .onload 
      I have tried to Google information but I cannot pinpoint what is 
      happening. 
      */ 
     } 
    } 
} 

Answer 1

Согласно моим комментариям, это мой ответ: довольно просто потому, что вы объявляете новое изображение() и устанавливаете src, ваш вызов drawImage, без сомнения, будет зависеть от загружаемого src ... если бы вы были используйте ранее загруженное изображение (например, из DOM), тогда создание нового изображения и загрузка не потребуются

установка триггеров src, загрузка - выполнение этого в другом классе по-прежнему подвергает вас времени ожидания загрузки и вы не можете быть уверены - я бы сказал, что использование onload является пуленепробиваемым и существенным, если вы являетесь загрузчиком изображений, которые вы используете - единственными альтернативными методами являются, когда изображения уже загружены в DOM (или предварительно загружены в другое место), вы можете найти примеры холста, которые вы видели, предназначены для инициирования загрузки изображений rned

Answer 2

Из кода:

 let kitten = new Image(); 
     kitten.src = 'img/kitten.png'; 

     // When trying to draw a kitten in the canvas, 
     // this will work: 

     kitten.onload =() => { 
      this.context.drawImage(kitten, 0, 0); 
     }; 

     // but this work won't: 
     //this.context.drawImage(kitten, 0, 0); 

Использование onload является де-факто, как вы получите изображение, которое вы можете рисовать на холсте. Микрооптимизация заключалась бы в том, чтобы сохранить словарь загруженных изображений, чтобы вы могли повторно использовать их при рисовании нескольких котят.