我有一个将图像附加到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
变量。因此,代码必须是同步的。这是一项严格的要求。