TypeScriptクラス.drawImage

Question

TypeScriptを使用してクラスコンストラクタを使用してHTML5キャンバスに子猫を描画しようとしていますが、このタスクを達成する方法がわかりません。私は実際に何が起きているのか予想される振る舞いに基づいて何をしようとしているのかを示すコードをコメントしました。タイマーやアドバイスをありがとうございます。あなたのコードから

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

私のコメントはここです：新しいImage（）を宣言してsrcを設定しているので、かなり簡単です。あなたのdrawImage呼び出しはsrcがロードされる前に間違いなくあります。以前にロードしたイメージ（DOMなど）を使用すると、新しいイメージとロードの作成は不要です。

srcがロードをトリガーに設定する - 別のクラスでそれを実行すると、ロード待ち時間あなたは確信することができません - あなたが使用している画像のローダーであれば、onloadを使用することは非常に難しく不可欠です - 画像が既にDOMにロードされている（または別の場所にプリロードされている）場合、あなたが見たキャンバスの例はイメージコンセプトのオンロードで開始されるように設計されています

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を使用するには、あなたがキャンバスに描くことができ、画像を取得する事実上の方法です。マイクロ最適化は読み込まれた画像の辞書を保持して、複数の子猫を描く場合にそれらを再利用できるようにすることです。