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에서 오류를 발생시키지 않습니다.
당신은 무엇을 볼 수 있습니까? 당신도 onready 시도해 볼 수도 있습니다 ... – hvgotcodes
나는 크롬에서 그것을 실행하고, 콘솔에서 오류를 보았다. 'Uncaught TypeError : 객체 #의 'fillStyle'속성이 함수가 아닙니다. ' http://jsfiddle.net/fhEjR/ –
감사합니다. 그러나'ctx.fillStyle = "# f00";을 사용하여 여전히 사각형이 나타나지 않습니다. 'onready'도 사용하지 않습니다. DOM을 어떻게 검사합니까? – dangerChihuahua007