자바 스크립트 | HTML 캔버스 오류

검정 캔버스에 사각형을 "그리는 중"노력하고 있지만 작동하지 않습니다.자바 스크립트 | HTML 캔버스 오류

window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    canvasContext = canvas.getContext('2d'); 
 

 
    draw(); 
 
} 
 

 
function draw() { 
 
    canvasContext.fillstyle='black'; 
 
    canvasContext.fillRect(0,0,800,600); 
 
    canvasContext.fillstyle='white'; 
 
    canvasContext.fillRect(0,0,10,10); 
 
}

<canvas id="canvas" width="800" height="600"></canvas>

왜 작동하지 않습니다이 내 코드?

출처

2017-09-04 Anne de Graaff

H ello - 구체적으로 작동하지 않는 것은 무엇입니까? 아무것도 보이지? –

** ** 문제가 아니지만 : 그 코드는 [암시 적 세계의 공포] (http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html)의 먹이로 떨어지고 있습니다. * (빈혈증에 관한 게시물) *. 적절한 범위에서 변수를 선언하십시오. 이 경우, 아마'onload' 핸들러를 제거하고 HTML의 끝에있는'' 태그 바로 전에'script'라는 범위 지정 함수에 모든 코드를 넣을 것입니다. –

draw 함수에서 canvasContext에 액세스 할 수 없습니다. –

소문자를 사용했다 "S"대신 채우기 스타일의 대문자 "S"의

변경

canvasContext.fillstyle

에

canvasContext.fillStyle

window.onload = function() { 
 
    canvas = document.getElementById('canvas'); 
 
    canvasContext = canvas.getContext('2d'); 
 

 

 
    draw(); 
 

 
} 
 

 
function draw() { 
 
    canvasContext.fillStyle='black'; 
 
    canvasContext.fillRect(0,0,800,600); 
 
    canvasContext.fillStyle='white'; 
 
    canvasContext.fillRect(0,0,100,100); 
 

 

 
}

<canvas id="canvas" width="800" height="600"></canvas>

출처

2017-09-04 17:11:50

코드 덤프는 * 유용한 * 대답이 아닙니다. * 당신이 무엇을 변경했는지, * 왜 *라고 말하십시오. –

그러나 또한 오타는 답변이 필요없고 의견 만 남기고 (가능한 경우) 투표를 닫습니다. 답변을 게시하면 OP가 질문을 삭제하는 것을 방지 할 수 있습니다. 이는 향후 다른 사람들에게 유용하지 않으므로 적절한 조치 과정입니다. (그리고 그들이 하향 투표에서 담당자 손실을 수락 할 수도 있습니다.) –

K 내 대답을 편집했습니다 –

자바 스크립트 | HTML 캔버스 오류

답변

관련 문제