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的圖像加載問題

回答

相關問題