javascript 이미지로드 문제

기본적으로 나는 바보입니다. 나는 무엇을하는지 알지 못합니다. 나는 완전한 자바 스크립트 눅입니다. 내가 원하는 건 추가 이미지, 입 이미지, 시계 이미지 (시간을 기준으로) 및 시계의 알약을로드하는 캔버스를 만드는 것입니다. 나는이 코드에서 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>

심층적 인 대답은 이러한 멍청한 놈 때문에 크게 감사하겠습니다.

출처

2013-11-28 Ben

거의 다 왔어. -215 (

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

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

그것은 당신이 결과 이미지를 끌어 원하는 위치에 조금 불분명하지만 당신은 X (500)와 y를 조절 할 수 있어야한다 : 당신은 단지 done 핸들러에 그리기 코드를 추가해야) 직위에 따라 (나는 당신이 가진 것을 복사했습니다.)

첫 번째 부분의 다른로드 코드는 로더를 사용함에 따라 약간 중복 된 것처럼 보입니다.

출처

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). 최근에이 주제에 대한 몇 가지 Q & A가있었습니다. – K3N

많은 질문을 한 번 더 끝내 셨습니다. done 함수에서는 imageLst [1]을 참조로 사용하여 이벤트 리스너를 추가하려는 경우 어떻게 처리할까요? 그게 합리적인지 확실하지 않습니다. – Ben

javascript 이미지로드 문제

답변

관련 문제