KineticJS 图像不能在本地工作，有时可以在线工作

【问题标题】：KineticJS images not working locally, sometimes work onlineKineticJS 图像不能在本地工作，有时可以在线工作
【发布时间】：2014-04-16 12:48:39
【问题描述】：

我现在正在测试 KineticJS。我尝试在tutorial 之后向画布添加图像。我改了一点代码，但还是差不多的。

令人困惑的是，它在本地根本不起作用……没有显示图像，也没有任何错误。在线是另一回事，图像已加载但有时看起来图像未加载。

这就是我所拥有的：http://codepen.io/semajtwin/pen/nIafc

我还以为是浏览器的问题，我尝试了三种不同的浏览器（Chrome、Firefox 和 Internet Explorer），但结果还是一样。

我就是想不通到底出了什么问题。

提前感谢您的帮助。

【问题讨论】：

你应该在加载时显示图像：codepen
@RobinvdA 非常感谢您的评论！！这绝对成功了。

标签： javascript html css canvas kineticjs

【解决方案1】：

@RobinvdA 是正确的，您需要给图像加载时间。

您的 draw draw_img(); 和 draw_img2(); 在图像完全加载之前被调用。

解决方法是把draw_img代码放在onload里面，像这样：

这是一些重构的代码和一个演示：http://jsfiddle.net/m1erickson/fLPZt/

// declare sun_img outside `onload` so it's accessible later

var sun_img;

// create a Kinetic.Image of the sun

var sunReady = false;
var sunImage = new Image();
sunImage.onload = function () {
    sun_img = new Kinetic.Image({
        x: 0,
        y: 0,
        width: 200,
        height: 200,
        image: sunImage,
        draggable: true
    });
    layer.add(sun_img);
    layer.draw();
};
sunImage.src = "http://2.bp.blogspot.com/-GDMbp9j3iSo/Tgh24-ighVI/AAAAAAAAAgE/a4glfYd5-68/s200/radiantsunheliumballoon.jpg";

【讨论】：

是的，@RobinvdA 是对的。也感谢您的帮助，马克。