请帮助 HTML5 Canvas 和 JS 在其上显示图像？答案

【问题标题】：Assistance with HTML5 Canvas and JS displaying images on it please?请帮助 HTML5 Canvas 和 JS 在其上显示图像？
【发布时间】：2014-07-02 22:40:17
【问题描述】：

我正在制作一个 Android 游戏，使用 HTML5 和 Javascript，我是其中的一部分，但是遇到了一些让我难过的东西，我的 JS 文件和我的 Html 文件一起工作，在画布上绘图等，但现在我正试图在画布上绘制图像，没有显示任何内容，我知道 img 函数正在被发现，因为 alert (img); 可以正常工作，所以它只是迷失了我。（目前这是从我大学时给的一本书中复制的，它是相同的，JS已经在JSHint中验证并通过了，所以我迷路了）另外，请很简单，我对JS很陌生，但是有用html很久了，这只是一个简单的大学作业游戏。

我的 HTML 代码是

<canvas id="game" width="1024" height="600">Sorry, your browser does not support this</canvas>

而我的 JS 是：

function init() {
    var elem = document.getElementById('game');
    var canvas = elem.getContext('2d');
    var img = document.createElement('img');
    img.setAttribute('src', 'http://www.minkbooks.com/content/snow.jpg');
    img.addEventListener("load", function() {
        canvas.drawImage(img, 20, 20);
        alert(canvas);
    });
}   
addEventListener("load", init);

它在 JSfiddle 上：http://jsfiddle.net/xw8m7/

【问题讨论】：

仅供参考，在您的 jsfiddle 中，将左侧的下拉菜单从“onload”更改为“onDOMready”。这允许页面完成加载，我正在看到图像加载。
是的，谢谢，这行得通，但是我现在如何在我的 JS 文件中实现它呢？
为了让您的问题对社区更有用，我建议您对其进行编辑。您的问题似乎是使用 XDK 运行代码的问题。有一个标签，intel-xdk。如果不是这样，那么它与在您的环境中定位正确的事件有关。
好的，感谢未来，我现在已经解决了，谢谢大家

标签： javascript android html html5-canvas

【解决方案1】：

此答案基于您的 jsfiddle。您在加载 javascript 代码后立即执行它。根据您的代码在 html 中的位置，canvas 元素可能尚未加载，这会阻止您的代码将图像加载到 canvas 元素中，您仍然会收到警报。

在 JSFiddle 中，您需要设置运行代码的选项“onDomready”。这意味着 JavaScript 在所有内容都已加载（您的画布元素）之前不会运行。在您的 jsfiddle 中更改后，您的函数将图像加载到画布中就好了。

更新： 根据您对 XDK 的评论，我找到了一些示例代码并对其进行了修改。原文来源：https://software.intel.com/en-us/node/493117

document.addEventListener("intel.xdk.device.ready",function(){
    init();        
},false);

【讨论】：

您好，感谢您的回答，在 jsfiddle 中，ondomready 的东西运行良好，请问我该如何在 XDK 中的代码中实现它？
你需要做一些研究。我没有用过XDK。对于网络，你会使用这样的东西：window.onload(function(){ init(); });看看这个链接是否有用：software.intel.com/en-us/node/493117