html/javascript canvas drawImage 2 회로드하지 않고

HTML5 캔버스에 이미지를 배치하고 싶습니다. 몇 가지 샘플 코드를 찾았지만 이미지가 실제로 2 번만로드되었습니다. JavaScript 또는 CSS로 이미지 중 하나를 숨길 수는 있지만 이미지를 한 번만로드해야하는 방식을 찾고 있습니다. .html/javascript canvas drawImage 2 회로드하지 않고

<!DOCTYPE html> 
<html> 
<body> 
    <img id="img" src="img.png" width="150px" height="150px"> 
    <canvas id="canvas" width="200px" height="200px"></canvas> 

    <script type="text/javascript"> 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 
     var img = document.getElementById("img"); 
     ctx.drawImage(img, 0, 0); 
    </script> 
</body> 
</html>

출처

2014-12-17 call-me

난 단지 이미지가 한 번 표시를 참조하십시오. canvas 요소는 비어 있으며 현재 이미지가 포함되어 있지 않습니다. 내가 놓친 게 있니? – GVashist

이미지의 처음 <img../> 노드를 만든 다음 캔버스에 그리기 때문에, 두 번 그려.

그냥 <img id="img" src="img.png" width="150px" height="150px">을 제거하고 자바 스크립트 코드에 이것을 추가 : 나는 요소 아래에 위의 코드를 사용할 때

img = new Image(); 
img.src = 'img.png'; 
img.onload = function(){ 
    ctx.drawImage(img, 0, 0); 
}

출처

2014-12-17 18:19:04 poxip

html/javascript canvas drawImage 2 회로드하지 않고

답변

관련 문제