JavaScript的图像加载问题

好吧基本上我是一个白痴，我不知道我在做什么..我是一个完整的JavaScript noob。我想要的只是创建一个画布，在其中加载一个添加图像，嘴巴图像，时钟图像（基于时间）和一个药丸在时钟的顶部。我在这段代码中使用YAIL，但我已经尝试了很多方法，并且完全无知，因为我做错了什么。有人可以帮助我。药丸也应该最终被拖入口中并将其注册到数据库中。此外，我开始编码行证明简单，但当我试图改变它到另一个文件，知道我的运气，它没有工作，因为上帝知道什么原因。JavaScript的图像加载问题

<!DOCTYPE html> 
<html> 
<head> 
<style> body{ background:#ddd;} 
canvas { background:#fff; 
display: block; 
margin: 10px auto; 
box-shadow: 0 5px 15px #aaa;}</style> 
<script type="text/javascript" src="yail.1.4.js"></script> 
<script type="text/javascript" src="action.js"></script> 
</head> 
<body> 
<canvas id="mycanvas"></canvas> 
<script> 
var Canvas = function(canvasEl, width, height){ 
this.el= canvasEl; 
this.el.width = width; 
this.el.height = height; 
this.ctx = canvasEl.getContext("2d"); 
} 
var canvas = new Canvas(document.querySelector("#mycanvas"), 1100, 650); 
drawadd(); 
function drawadd(){ 
var add = new Image(); 

add.onload = function() { 
    canvas.ctx.drawImage(this, 500,-215); 
}; 
add.src="add.png"; 
} 


drawmouth(); 
function drawmouth(){ 
var mouth = new Image(); 

mouth.onload = function() { 
    canvas.ctx.drawImage(this, 100,300,175,100); 
}; 
mouth.src="mouth.png"; 
} 

var currentdate = new Date(); 
var datetime = currentdate.getHours(); 
var loader = new YAIL(done, progress, errors); 

if(datetime==1||datetime==13){ 
loader.add("clock/clock1.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==2||datetime==14){ 
loader.add("clock/clock2.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==3||datetime==15){ 
loader.add("clock/clock3.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==4||datetime==16){ 
loader.add("clock/clock4.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==5||datetime==17){ 
loader.add("clock/clock5.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==6||datetime==18){ 
loader.add("clock/clock6.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==7||datetime==19){ 
loader.add("clock/clock7.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==8||datetime==20){ 
loader.add("clock/clock8.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==9||datetime==21){ 
loader.add("clock/clock9.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==10||datetime==22){ 
loader.add("clock/clock10.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==11||datetime==23){ 
loader.add("clock/clock11.png"); 
loader.add("clock/pill.png"); 
} 
else if(datetime==0||datetime==12){ 
loader.add("clock/clock12.png"); 
loader.add("clock/pill.png"); 
} 


loader.load(); 
function done(e) { 
    var imageLst = e.images; 
    var urlLst = e.urls; 
    } 
function progress(e) { var current = e.current; 
    var total = e.total; 
    var image = e.img; 
    var pst = current/total * 100; } 

function errors(e) { var url = e.url; 
    var originalErrorObject = e.error; } 

</script> 
</body> 
</html>

一个深入的答案将不胜感激，因为即时通讯这样一个noob。

来源

2013-11-28 Ben

你快到了。你只需要绘制代码添加到done处理程序：

function done(e) { 
    var imageLst = e.images; 

    canvas.ctx.drawImage(imageLst[0], 500, -215); 
    canvas.ctx.drawImage(imageLst[1], 500, -215); 
}

这是一个有点不清楚你想画所产生的图像什么位置，但你应该能够调整X（500）和y（-215 ）相应的位置（我刚刚复制了你的）。

当您使用加载程序时，第一部分中的其他加载代码看起来有点多余。

来源

2013-11-28 21:56:33 K3N

以前的那些从来没有重叠，这是一种正在进行的工作，从教程或一个人回答在stackoverflow等这只是我卡住的点，因为这样做，就像我为add.png和mouth.png有时会在时钟后加载药丸等。为了澄清图像将始终按照该顺序加载，即时钟然后是顶部的药丸？还有任何使它可以拖放的指针？但这绝对有效。 – Ben

@ user2232418是的，使用YAIL和'done'回调函数可以确保所有图像都是按照您使用url-array定义的顺序加载的。对于拖放，您还可以查看[easyCanvasJS]（http://easycanvasjs.com/），该内置支持将图像拖动到画布上（从桌面文件夹中），或者如果您需要浏览器内联拖放功能，并简单地[在这里做搜索]（http://stackoverflow.com/search?q=drag+and+drop+canvas）。最近有关于该主题的一些问答。 – K3N

非常感谢最后一个问题，在done函数中，我如何将imageLst [1]作为参考进行操作，就像我想添加一个事件监听器一样？我不确定这是否合理。 – Ben

JavaScript的图像加载问题

回答

相关问题