2012-03-29 4 views
1

HTML5 캔버스에 빨간색 사각형을 그리려합니다. 여기에 내 HTML이있다. 여기HTML5 캔버스에서 사각형을 그릴 수없는 이유는 무엇입니까?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset=utf-8> 
    <title>My Canvas Experiment</title> 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
    <script src="plotting.js"></script> 
    <!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 
     </script> 
    <![endif]--> 
    </head> 
    <body> 
    <canvas id="plot"></canvas> 
    </body> 
</html> 

는 plotting.js입니다 :

여기
document.onload = function() { 
    var c = document.getElementById("plot"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle("#f00"); 
    ctx.fillRect(0, 0, 175, 40); 
} 

가 main.css가 있습니다 :

body { margin:100px; } 

article, aside, figure, footer, header, hgroup, menu, nav, section { 
    display:block; 
} 

#plot { 
    width: 500px; 
    height: 400px; 
} 

왜 페이지가 비어? Chrome Web Developer Console에서 오류를 발생시키지 않습니다.

+0

당신은 무엇을 볼 수 있습니까? 당신도 onready 시도해 볼 수도 있습니다 ... – hvgotcodes

+0

나는 크롬에서 그것을 실행하고, 콘솔에서 오류를 보았다. 'Uncaught TypeError : 객체 # 의 'fillStyle'속성이 함수가 아닙니다. ' http://jsfiddle.net/fhEjR/ –

+0

감사합니다. 그러나'ctx.fillStyle = "# f00";을 사용하여 여전히 사각형이 나타나지 않습니다. 'onready'도 사용하지 않습니다. DOM을 어떻게 검사합니까? – dangerChihuahua007

답변

5

사용 window.onload 대신 document.onload (@의 stewe의 제안을 유지). 당신이 DOM을 검사 할 때

+0

안녕하세요! 고맙습니다. 사각형은'window.onload = function() {...'과 함께 나타납니다. 그러나 필자는 왜 문서가 문서 뒤에 준비되었는지 혼란 스럽습니다. – dangerChihuahua007

+1

사실,이 페이지는 나를 위해 그것을 정리했습니다. http://stackoverflow.com/questions/588040/window-onload-vs-document-onload windows.onload는 페이지 준비가 완료되면 실행되고 document.onload는 DOM 준비가되면 실행됩니다. – dangerChihuahua007

7

은 교체 :

ctx.fillStyle("#f00");

로 :

ctx.fillStyle="#f00";

+0

????? ?????????? – Thariama

관련 문제