2017-02-24 1 views
-1

나는 단순한 탁구 게임을 만들기 위해 udemy 코스를 사용했습니다. 연습으로 다시 작성 중이며 오류 캔버스가 계속 null로 표시됩니다. 어떤 도움?내 HTML 캔버스가 null입니다. 정말 성가 시게

<html> 
<canvas id="gamecanvas" width="600" height="800"></canvas> 
<script> 
var canvas = null; 
var Context = null; 

window.onload = function(){ 

canvas.document.getElementById("gamecanvas"); 
Context.canvas.getContext("2d"); 
drawEverything(); 
} 

function drawEverything() { 
Context.fillStyle = "black"; 
Context.fillRect(0,0,canvas.width,canvas.height); 

Context.fillStyle = "white"; 
Context.fillRect(0,360,20,80); 


Context.fillStyle = "white"; 
Context.fillRect(580,360,20,80); 


Context.fillStyle = "green"; 
context.beginpath(); 
context.arc(0,0,10,10,Math.PI*2,true); 
context.fill(); 


} 
+0

아마도'onload' 함수에서'canvas = document.getElementById ("gamecanvas")'가 끝났습니까? –

+1

'canvas.document'를하고 있습니다. 기본적으로'null' 객체의'document' 속성에 접근하려고 시도합니다. –

+3

'context! = Context' 때문에 문제가 발생할 것입니다. –

답변

1

null로 설정했기 때문입니다.

canvas.document.getElementById("gamecanvas"); 

canvas = document.getElementById("gamecanvas"); 

하려면 그렇지 않으면, 당신은 설정하지 캔버스를 변경합니다.

+1

그게 유일한 문제는 아닙니다. JavaScript는 대소 문자를 구분합니다. – Andreas

0

이렇게해야합니다.

canvas = document.getElementById("gamecanvas"); 
Context = canvas.getContext("2d"); 
0

캔버스를 null로 설정하면 물론 null이됩니다. 도움이 될 것입니다.

canvas = document.getElementById("gamecanvas") 
context = canvas.getContext("2d"); 
관련 문제