Javascript TypeScript类.drawImage

我试图通过使用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.
             */
        }
    }
}

模块游戏{
导出类测试{
宽度：数字；
高度：数字；
单元格宽度：数字；
单元高度：数字；
画布：HTMLCanvasElement；
上下文：CanvasRenderingContext2D；
构造函数（）{
这个宽度=28；
这个高度=31；
这个.cellWidth=20；
此.cellHeight=20；
this.canvas=document.getElementById（“游戏画布”）；
this.context=this.canvas.getContext（“2d”）；
this.canvas.width=this.width*this.cellWidth；
this.canvas.height=this.height*this.cellHeight；
this.context.fillStyle=“蓝色”；
this.context.fillRect（0，0，this.canvas.width，this.canvas.height）；
让小猫=新形象（）；
kitten.src='img/kitten.png'；
//在画布上画小猫时，
//这将有助于：
kitten.onload=（）=>{
this.context.drawImage（kitten，0,0）；
};
//但这项工作不会：
//this.context.drawImage（kitten，0,0）；
/*
我假设通过访问this.context属性
我可以直接访问画布，并且可以使用
drawImage在上面画小猫；然而，这种方法
画布上没有小猫。
只有使用.onload方法，它才能工作。
我正在使用（）=>符号，以便在块内
指的是班级。
我见过许多JavasScript文件，其中的图像是简单绘制的
通过：
drawImage（image，0,0）；
它们未嵌入到.onload中
我曾尝试在谷歌上搜索信息，但我无法准确指出是什么
发生
*/
}
}
}

从您的代码：

        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

是获得可以在画布上绘制的图像的实际方式。一个微观优化是保留一个加载图像的字典，这样当你画多只小猫时，你就可以重用它们

从您的代码：

        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

是获得可以在画布上绘制的图像的实际方式。一个微观优化是保留一个加载图像的字典，这样当你画多只小猫时，你就可以重用它们

根据我的评论，这里是我的答案：很简单，因为您正在声明一个新的Image（）并设置src，您的drawImage调用无疑将在加载src之前进行。。。如果要使用以前加载的图像（例如来自DOM），则无需创建新图像并加载

---

设置src会触发加载-在另一个类中执行此操作仍然会导致加载的等待时间，您无法确定-我想说，如果您是正在使用的图像的加载程序，则使用onload是防弹且必不可少的-唯一的替代方法是当图像已经加载到DOM中（或在其他地方预加载）时，您可能会发现，您所看到的画布示例被设计为在加载相关图像时启动。根据我的评论，这里是我的答案：很简单，因为您正在声明一个新图像（）并设置src，您的drawImage调用无疑将在加载src之前启动。。。如果要使用以前加载的图像（例如来自DOM），则无需创建新图像并加载

---

设置src会触发加载-在另一个类中执行此操作仍然会导致加载的等待时间，您无法确定-我想说，如果您是正在使用的图像的加载程序，则使用onload是防弹且必不可少的-唯一的替代方法是当图像已经加载到DOM中（或在其他地方预加载）时，您可能会发现，您所看到的画布示例设计为在加载相关图像时启动

非常简单，因为您正在声明一个新图像（）并设置src，您的drawImage调用无疑将在加载src之前启动。。。如果要使用以前加载的图像（例如来自DOM），则不会创建新图像并加载required@AMacdonald非常感谢您的解释！我现在更明白了。然后我应该在这个类之外加载图像吗？例如，在另一个类中？在使用此.context.drawImage（）之前，我尝试使用类的方法加载图像时，它不起作用。我试图坚持OOP设计：）我必须在画布上画四只小猫。我认为最好将它们加载并存储在一个数组中，但不确定在何处创建该数组。感谢您提供的进一步见解：）设置src会触发加载-在另一个类中执行此操作仍然会导致加载的等待时间，您无法确定-我想说，如果您是正在使用的图像的加载程序，则使用onload是防弹且必要的-唯一的替代方法是当图像已加载到在DOM中，您可能会发现您看到的画布示例设计为在加载图像时启动concerned@AMacdonald谢谢我想将您的响应标记为答案，但我无法通过注释来完成。我将创建一个您可以接受的答案。很简单，因为您正在声明一个新图像（）并设置src，您的drawImage调用无疑将在加载src之前进行。。。如果要使用以前加载的图像（例如来自DOM），则不会创建新图像并加载required@AMacdonald非常感谢您的解释！我更了解n