Question

我正在制作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/

Answer 1

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

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

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

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

请帮助HTML5 Canvas和JS显示图像吗？

1 个答案: