캔버스 drawImage가 작동하지 않습니다.

이 그림은 캔버스에 그려지지 않습니다. 그것은로드되고 body.appendChild (img); 호출됩니다. 캔버스에 왜 나타나지 않는지 아는 사람이 있습니까? 나는 우드 시티에서 html5 과정의 코드 예제를 따르고 있습니다. 어떤 도움을 주셔서 감사합니다!캔버스 drawImage가 작동하지 않습니다.

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>First Game</title> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
      <link type="text/css" rel="stylesheet" href="TestCanvasCSS.css"/> 
     </head> 
     <body id="body"> 
      <script> 
       var canvas; 
       var ctx = null; 
       var img = null; 
       var body = null; 

       setup = function() { 
        body = document.getElementById("body"); 
        canvas = document.createElement("canvas"); 

        ctx = canvas.getContext('2d'); 

        //canvas.setAttribute("class","canvasMain"); 
        canvas.width = window.innerWidth; 
        canvas.height = window.innerHeight; 
        body.appendChild(canvas); 

        img = new Image(); 
        img.onload = onImageLoad(); 
        img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
       }; 

       onImageLoad = function() { 
        console.log("Image has loaded"); 
        body.appendChild(img); 
        ctx.drawImage(img, 0, 0); 
       }; 
       setup(); 
      </script> 
      <!-- <script type="text/javascript" src="TestCanvas.js"> </script> --> 
     </body> 
    </html>

출처

2013-09-07 user1668814

img.onload = onImageLoad;

하지 당신이

출처

2013-09-07 02:40:12 user1600124

그것은 정말 간단이었다 괄호를 포함하면 당신이 기능을 실행하고 onImageLoad();! 고맙습니다! – user1668814

캔버스 drawImage가 작동하지 않습니다.

답변

관련 문제