javascript : 캔버스의 이미지 그리기 (배경)

Question

그래서 문제는 내가 배경을 먼저 그릴 수 없으며 배경 위에 다른 모든 것을 그립니다. 내 코드의 일부 위치 (루프 함수에서)에서는 작동하지만 내 초기화 함수에서는 그렇지 않습니다.

// var img = new Image(); 
// img.src = 'client/img/spaceship.jpg'; 
// ctx.drawImage(img,0,0); 
Img('spaceship',ctx); 
drawGrayzonePlanets(ctx,serverObjects); 

:

가, 지금 내 초기화 함수에서이 같은 위의 코드를

function imgImport(imgName,ctx){ 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img,0,0); 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

module.exports = imgImport; 

멋진 사용 배경 IMG를 얻고 그것을 그리기위한

코드 : 첫 번째 내 코드에 대한 비트 소개

3 개의 주석 처리 된 줄을 지금 당장 생각하지 마십시오. 첫 번째 활성 라인 Img ('우주선', ctx) : nodej를 통해 사용되는 위의 imgImport 함수입니다. DrawGrayzonePlanets 아래 볼 수 있습니다 : 내가 실행하면 지금

function drawObjects(ctx,status){ 
    switch(status.shape){ 
     case "circle": 
     var status = status.cic; 
     console.log(status); 
     ctx.fillStyle = status.color; 
     ctx.beginPath(); 
     ctx.arc(status.x,status.y,status.planetSize,0,2*Math.PI); 
     ctx.stroke(); 
     ctx.fill(); 
     break; 
    } 
} 

module.exports = drawObjects; 

을 :

function drawGrayzonePlanets(ctx,serverObjects){ 
    for(object in serverObjects){ 
    obj = serverObjects[object]; 
    Drawobjects(ctx,obj); 
    } 
} 

는 기본적으로 함수는 위의이 같은보고 서버에서 데이터를 가져 와서 행성을 그릴 Drawobjects() 함수를 사용하여 Img() 함수는 처음에는 drawGrayzonePlanets() 함수를 사용하고, 행성은 배경 뒤에 그려져 보이지 않습니다. 명백한 코드의 순서를 변경하면 똑같은 일이 발생합니다. 이제는 3 줄을 주석 처리하고 img() 함수를 outcommenting하여이 문제를 해결할 수있는 방법을 발견했습니다. drawGrayzonePlanets() 함수를 유지하십시오. 이렇게 :

var img = new Image(); 
img.src = 'client/img/spaceship.jpg'; 
ctx.drawImage(img,0,0); 
//Img('spaceship',ctx); 
drawGrayzonePlanets(ctx,serverObjects); 

위의 코드가 작동하면 행성이 배경에 그려집니다. 하지만 Img() 함수를 사용하는 것만으로 그 메서드가 작동하는 이유를 이해할 수 없습니다. 아마도 img.onload = function() {}과 관련이 있을지 모르지만 그 이유를 알 수 없습니까?

누군가 실제로 일어나는 일을 설명 할 수 있습니까?

Answer 1

imgImport가 비동기 함수이기 때문에. img.onload의 코드는 이미지가로드 된 후에 실행되지만 이미지가로드되는 동안 나머지 코드는 실행되어 행성을 그립니다. 그런 다음 잠시 후 이미지가 도착하고 그 이미지를 윗쪽으로 그립니다.

당신은, 예를 들어, imgImport 기능을 세 번째 콜백 인수를 포기하고이 코드의 나머지 부분을 실행할 수 있습니다 :

function imgImport(imgName,ctx,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
     ctx.drawImage(img,0,0); 
     callback() 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

을 그리고 이런 식으로 실행 : 첫 번째에서

Img('spaceship',ctx,function() { 
    drawGrayzonePlanets(ctx,serverObjects); 
}); 

Answer 2

을 로드가 끝날 때까지 배경을 기다리고있는 코드를 작성한 다음 그립니다. 이것은 다른 이미지의 드로잉보다 늦은 시각입니다. 두 번째 코드에서는 로딩을 기다리지 않습니다. 다음과 같이 사용보다

function imgImport(imgName,ctx,callback){ 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(img,0,0); 
    callback(); 
    }; 
    img.src = 'client/img/' + imgName + '.jpg'; 
} 

:

이

Img('spaceship',ctx,function(){ 
    alert("bckground loading finished. Continue loading..."); 
    drawGrayzonePlanets(ctx,serverObjects); 
});