createPattern(backgroundImg, "repeat"); returns 空

Question

var backgroundImg = new Image(50, 50);
backgroundImg.src = "img/grass.png";
var backgroundPattern = screen.createPattern(backgroundImg, "repeat");

backgroundPattern 为空。为什么？？

Answer 1

因为您需要给图像时间来加载。为此，请在 Image 实例上使用 onload 处理程序。请注意，这是异步的，因此您需要在其余代码中牢记这一点：

var backgroundPattern;
var backgroundImg = new Image(50, 50);

backgroundImg.onload = function() {
    // provided screen holds the 2D context of the canvas:
    backgroundPattern = screen.createPattern(this, "repeat");    

    // execute next part of your code from here... 
    // next();
};

backgroundImg.src = "img/grass.png";