자바 스크립트 캔버스로 이미지를 그릴 수 없습니다.

나는 cordova를 사용하여 Android 용 하이브리드 javascript 앱을 개발 중입니다.
다음 코드에서는 캔버스에 이미지를 그리는 두 가지 방법을 사용합니다 : setTimeout없이.
안드로이드 장치의 코드 (코드 바 포장)는 func1에서 반응하지 않지만 func2에서 반응합니다. func1의 두 번째 클릭은 마침내 캔버스에 이미지를 그립니다. 완전히 이상합니다.자바 스크립트 캔버스로 이미지를 그릴 수 없습니다.

필자는 데스크톱 PC에서 두 기능 모두 정상적으로 작동하므로 Android 기기 성능과 관련이 있다고 가정합니다.

왜 이런 일이 발생합니까? setTimeout 사용을 피하는 방법?

<html style="background: white;"> 
<head> 
</head> 
<body> 
<button onclick="func1()">render img2 func1</button> 
<button onclick="func2()">render img2 func2</button><br /> 
<canvas id="canv">canv</canvas> 

<script> 
    var img = new Image(); 
    var canvas = document.getElementById('canv'); 
    canvas.width = 100; 
    canvas.height = 100; 
    var ctx = canvas.getContext("2d"); 

    function setSrc() { 
     img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcLLkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGTmE6z3QAAAABJRU5ErkJggg==" 
    }; 

    function drawImg() { 
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
    }; 

function func1() { 
    setSrc(); 
    drawImg(); 
}; 

function func2() { 
    setSrc(); 
    setTimeout(function() { 
     drawImg(); 
    }, 500); 
}; 

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

출처

2014-02-20 31415926

이미지로드가 비동기 적이므로 이상하지 않습니다. 이미지가로드되기 전에 그려야합니다. 두 번째 클릭시 이미지가로드되어 이미지가 그려집니다. 그런 다음 약간 기능을 수정

function setSrc(callback) { 
    img.onload = callback; /// when image is loaded this will be called 
    img.src = 'data: ...snipped...'; 
}; 

function drawImg() { 
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
};

당신은이 일을하기 위해 콜백 메커니즘을 사용할 필요가

function func1() { 
    setSrc(drawImg); /// drawImg is now callback function for setSrc. 
};

참고 : 당신은 예를 들어 위에 물건을 그릴해야하는 경우 이미지의 콜백 함수에서 코드를 계속해야합니다. 예를 들어 이미지가 그려진 후 코드의 다음 단계를 호출하는 drawImg 함수에도 콜백을 추가합니다. 앞서 언급했듯이 이미지 로딩이 비동기식이기 때문에 이미지가로드되기 전에 다른 무언가를 그리려고하면 이미지가 맨 위에 그려집니다.

출처

2014-02-20 16:08:39 K3N

멋지다! 너! – 31415926

자바 스크립트 캔버스로 이미지를 그릴 수 없습니다.

답변

관련 문제