我正在尝试在HTML5画布中绘制一个红色矩形。这是我的HTML。
<!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 :(得分:7)
替换:
ctx.fillStyle("#f00");
使用:
ctx.fillStyle="#f00";
答案 1 :(得分:5)
使用window.onload
代替document.onload
,(保留@ stewe的建议)。