在javassript中使用drawimage類中的未捕獲類型錯誤

嘗試在javascript中使用圖像作爲屬性創建類時出現問題。我用context.drawImage註釋的那一行會引發這個錯誤。在javassript中使用drawimage類中的未捕獲類型錯誤

未捕獲的類型錯誤：未能執行上「CanvasRenderingContext2D」「的drawImage」：所提供的值不是類型的「（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）」。

我覺得這很有趣，因爲當我看着圖像時，我在調試時作爲參數傳遞，它告訴我它是一個HTMLImageElement。我來自靜態類型的語言，我不明白爲什麼有一個類型錯誤，當傳遞的對象顯然是錯誤所要求的類型。 `

 var canvas = document.getElementById('canvas'); 

     var context = canvas.getContext('2d'); 

     var edgeY = 600; 

     function Start() 
     { 
      var letter = new Letter(true, 10); 
     } 


     function Letter(_isSyllable, speed) 
     { 
      this.isSyllable = _isSyllable; 
      this.imgObject = new Image(80, 80); 
      this.posY = 10; 
      this.speed = speed; 
      this.ImageReady = false; 
      var source; 
      if (this.isSyllable) 
      { 
       source = "./Maganhangzok/image_part_" + (Math.floor(Math.random() * 14 + 1)) + ".jpg"; 
      } 
      else 
      { 
       source = "./Massalhangzok/image_part_" + (Math.floor(Math.random() * 20 + 1)) + ".jpg"; 
      } 
      this.imgObject.src = source;  
      this.imgObject.onLoad = new function() 
      { 
       this.ImageReady = true; 
       console.log(this.imgObject); 
       context.drawImage(this.imgObject, 120, this.posY); //this one throws the exception 
      } 


     } 
     Letter.prototype.Move = new function() 
     { 
      this.posY += this.speed; 
      context.clearRect(120, this.posY, 80, 80); 
      if (!this.ImageReady) 
      { 
       return false; 
      } 
      if (this.posY + 80 > edgeY) 
      { 
       return true; 
      } 
      else 
      { 
       context.drawImage(this.imgObject, 120, this.posY); 
       return false; 
      } 

     } 


    </script>`

來源

2017-12-02 Mugiwara

你怎麼稱之爲'onLoad'方法？（JS區分大小寫，事件處理程序全部小寫）。您的類型錯誤可能是由HTMLImage導致，但尚未加載有效的源代碼。 – Kaiido

我試過了，但函數調用的方式沒有輸入錯誤，但我開始單步調試函數，我注意到在onload的事件函數中，this.imgObject突然變成了未定義的，而在構造函數中它有一個值。事件發生時，它爲什麼會失去它的價值？ – Mugiwara

由於事件處理程序默認綁定到觸發事件的元素。你將不得不調用這個函數的'bind（）'方法。 – Kaiido

您需要首先調用的onLoad和設置源URL。

this.imgObject.onLoad = new function() 
    { 
     this.ImageReady = true; 
     console.log(this.imgObject); 
     context.drawImage(this.imgObject, 120, this.posY); //this one throws the exception 
    } 
    this.imgObject.src = source;

來源

2017-12-02 22:05:39

在javassript中使用drawimage類中的未捕獲類型錯誤

回答

相關問題