使用方法绘制图像

Question

我目前正在学习 JavaScript OOP。在这里，我创建了一个名为 person 的构造函数。我给它一个原型属性来在画布上绘制每个新人的脸（我的意思是图像）。我引入了不同的警报命令来检查它是否工作。我认为我做的一切都是正确的，但由于某种原因，图像没有被绘制在画布上。

JavaScript

function draw(){

    var canvas = document.getElementById("mycanvas");
    var ctx = canvas.getContext('2d');
    canvas.width = 600;
    canvas.height = 600;
    canvas.style.border = "1px solid black";
    var person = function (name, age) {
       this.name = name;
       this.age = age;
    };

    person.prototype.drawit = function(src, xpos, ypos, width, height) {
        this.src = src;
        this.xpos = xpos;
        this.ypos = ypos;
        this.width = width;
        this.height = height;

        var img = new Image();
        img.src = this.src;
        ctx.drawImage(img, this.xpos, this.ypos, this.width, this.height);
    };

    var person1 = new person("winsteen", "14");
    person1.drawit("lol1", 200, 200, 40, 50);
    alert(person1.age);
    alert(person1.src);
}

window.onload = draw;

HTML

<canvas id="mycanvas"></canvas>

Answer 1

这是因为您的图像需要时间来加载，并且您在加载之前绘制图像。设置img.src 后，将img.onload 设置为执行绘图的函数。一旦图像加载并准备好绘制，该函数将被异步调用。

如果您想使用 this 关键字，您需要绑定您的负载处理程序，因为正如 Paul 所说，否则它会引用图像。

img.onload = drawIt.bind(this);
function drawIt(){
   // Your drawing method, doing nothing but drawing the image to the canvas.
}

我注意到您的代码中有许多其他内容可以更改。目前你的很多代码都是多余的，你不需要在你的drawIt方法中传递xpos、ypos、width、height等。它应该设置/存储在您的对象构造函数中，因此您的 drawIt 方法在没有参数的情况下被调用，并将根据存储在您的对象中的值来绘制它。

如果您想要一种方法来设置这些值，请使用另一种方法来设置它们。

设置/加载图像也是如此。您不想在每次绘制时都创建新图像并加载它。创建一个单独的“loadImage”方法来加载图像并在图像加载后调用drawIt（如我上面的示例所示）。

何时使用bind()：

您想使用this 关键字来访问实例变量并创建在许多不同对象上工作相同的函数，因为'this.width' 指的是Person.width 或Street.width 或基本上任何宽度，取决于函数的上下文。方法保持不变，this 会改变。

但是如果您使用事件侦听器this 可能不会总是像您期望的那样运行。 bind() 是一种您可以在任何函数上使用的方法，它会将该函数永久替换为一个新函数，该函数将始终在您作为bind() 的第一个参数提供的上下文中执行。 p>

换句话说：您创建一个新的函数副本，其中this 被永久设置为特定对象。在这种情况下，它将是您的 Person。

Answer 2

1. 图像必须先加载，然后才能绘制。
2. 在<img> 的处理程序中，this 将是<img>。
3. 在调试时检查使用高对比度，这样你就不会得到例如白底白字。

稍微重构一下，你会得到这样的结果：

(function () { // Immediately-invoked_function_expression (IIFE) keeps
               // global namespace clean - see
               // <https://en.wikipedia.org/wiki/Immediately-invoked_function_expression>.
    function draw() {
        var canvas = document.getElementById('myCanvas'),
                     ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = "1px solid black";

        function Person(name, age) { // Constructors usually start with a capital letter
            this.name = name;
            this.age = age;
        }

        Person.prototype = {
            constructor: Person // Good to let instances know who they are
        };

        Person.prototype.drawit = function (src, dx, dy, dw, dh) {
            var img;
            this.src = src;
            // Etc. if you want to store these
            img = new Image();
            img.addEventListener('load', function () {
                // `this` here means `img`, access the other values directly
                // from their variables.
                ctx.drawImage(this, dx, dy, dw, dh);
            });
            img.src = src; // Initiate image load
        };

        // Finished setup, now use
        var person1 = new Person("Winsteen", "14");
        person1.drawit("lol1", 200, 200, 40, 50);
    }
    window.addEventListener('load', draw); // Safe wait for page load
}()); // Invoke the IIFE