新图像中的createPattern

时间:2016-07-25 11:00:10

标签: javascript html5 asynchronous

我有一个将图像附加到dom的函数,从该图像创建一个图案并将该图案返回到外部代码。我面临的问题是该功能有时会停止工作。据我所知,这是因为图像加载不是那么快。因此,当我调用ctx.createPattern(img, "repeat")时,img尚未加载。整个代码如下:

Constr.createImagePattern = function (canvas, img_id) {
    var ctx = canvas.getContext("2d"),
        img,
        pattern;
    if (document.getElementById("_" + img_id + "_")) {
        img = document.getElementById("_" + img_id + "_");
    } else {            
        img = document.createElement("img");
        img.id = "_" + img_id + "_";
        img.src = "resources/backgrounds/_" + img_id + "_.png";
        img.style.visibility = "hidden";
        document.body.appendChild(img);
    }
    pattern = ctx.createPattern(img, "repeat");
    return pattern;
};

我希望有些人可能会建议使用onload事件和一些额外的回调。但我要强调一点,我绝对需要返回pattern变量。因此,代码必须是同步的。这是一项严格的要求。

0 个答案:

没有答案