2

现在我的整个项目太大了，无法复制和粘贴，但这里是我现在正在做的事情的基本分类：

$(document).ready(function(){
var canvas = $('#Canvas');
var data = {source: "images\pattern.png", repeat: "repeat"} ;
var pattern = canvas.createPattern(data); //Returns 'Null' at random
});

到目前为止我看过的东西：

  • 加载时间（有点相关，当页面加载速度更快时，它似乎更频繁地中断）
  • 加载顺序（似乎不相关）
  • 通过预先将其强制为页面图像来预加载图像（不修复它）
  • 使用 Image() 预加载它并将图像路径传递给 Image().src （也不修复它）
  • 将 Image() 作为 data.source 而不是字符串路径传递（可能有一点帮助）
  • 事先初始化 JCanvas（似乎不存在此功能）
  • 尽早或尽可能晚地创建模式（似乎改变了频率，但不是很多）

它似乎有自己的想法，我无法弄清楚我做错了什么。任何人都知道我做错了什么？

-编辑1-

现在通过 Jcanvas 源进行调试，我认为它与上下文有关。有什么方法可以让我预加载画布上下文吗？

-编辑2-

忘记我所说的关于上下文的一切，我想我明白了。

 //JCanvas source
 [...]
 else {
// Use URL if given to get the image
img = new Image();
img.crossOrigin = params.crossOrigin;
img.src = source; //<-- source is the url of my image ("images\pattern.png")
}

// Create pattern if already loaded
if (img.complete || imgCtx) { 
    onload(); //<-- When this runs, the image pops up perfectly fine
} else {
    img.onload = onload(); //<-- This is what causes the problem, 
                           //onload never seems to actually run 

            // Fix onload() bug in IE9
    img.src = img.src;
    }

img.onload 事件应该在图像加载后直接发生，但它似乎永远不会发生。

4

0 回答 0