在javassript中的類中使用drawimage時，javascript中出現未捕獲的類型錯誤

Question

嘗試使用圖像作為屬性的javascript創建類時遇到問題。 我用context.drawImage注釋的行拋出此錯誤。

未捕獲的TypeError：無法在'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>`

Answer 1

您需要先調用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;