html5 캔버스에 이미지 추가

캔버스에 이미지를 추가하려고했지만 작동하지 않는 것 같습니다. 모양을 보았지만 내 코드에 아무 문제가 없지만 다른 사람이 볼 수는 있습니다.html5 캔버스에 이미지 추가

이것은 내 JS 파일입니다. 여기

if (window.addEventListener) 
{ 
    window.addEventListener('load', onLoad, false); 
} 

function onLoad() 
{ 
var canvas; 
var context; 

function initialise() 
{ 
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext) 
    { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) 
    { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

} 
} 

function draw() 
{ 
    var sun = new Image(); 
    sun.src = 'images.sun.png'; 
    context.drawImage(sun, 100, 100); 
} 

onLoad(); 
draw();

내 HTML이 mabye이는 온로드 이벤트의에 이미지를 그릴

<!doctype html> 
    <html> 
     <head> 
      <title>Test</title> <script type="text/javascript" src="javascript/canvas.js"></script> 
     </head> 
     <body> 
      <canvas id="canvas" width="800" height="600"> 
       Your browser does not support the canvas tag 
      </canvas> 

     </body> 
    </html>

출처

2012-12-09 Nigel Brook

문제는 캔버스를 선언 할 것을 & 문맥에서, onLoad()하지만 draw()에서 액세스하려고합니다.

그래서, 그들이 글로벌함으로써, 문제가 해결 :

var canvas; 
var context; 

if (window.addEventListener) { 
    window.addEventListener('load', function(){ 
     onLoad(); 
    }, false); 
} 

function onLoad() { 
    initialise(); 
    draw(); 
} 

function initialise() { 
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext) { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    context = canvas.getContext('2d'); 
    if (!context) { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

} 

function draw() { 
    var sun = new Image(); 
    sun.addEventListener('load', function(){ 
     context.drawImage(sun, 100, 100); 
    }, false); 
    sun.src = 'http://puu.sh/1yKaY'; 
}

출처

2012-12-09 09:48:04 andy

의 방법 '의 drawImage'을 호출 할 수 없습니다 나는 같은 얻을 오류 Uncaught TypeError : 정의되지 않은 –

의 'drawImage'메서드를 호출 할 수 없습니다. 이제 작동 할 것입니다. – andy

시도해 주셔서 감사하지만 아직도 오류가 발생하고 있습니다. –

보십시오 문제를 찾는 데 도움이됩니다의

sun.onload = function() { 
    context.drawImage(sun, 100, 100); 
};

출처

2012-12-09 09:36:37

내가 나에게이 오류 catch되지 않은 형식 오류를이 크롬 디버거 게임을 시도 할 때 : 정의되지 않은 –

html5 캔버스에 이미지 추가

답변

관련 문제