为什么不显示这个HTML5画布?

Ali*_*ice 0 html javascript canvas

<!doctype html>
<html>
<head>
<title>Canvas test</title>
</head>
<body>
<script type="text/javascript">
c = getElementById('canvas');
ctx = c.getContext("2d")'
ctx.fillRect(10,10,10,10);
</script>
<canvas id="canvas" height ="100" width = "100"></canvas>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我在Chrome和IE 9上试过这个,但它们都没有显示任何内容.你知道为什么这不起作用吗?

这可能是一些愚蠢的事情,我的朋友要求我发布这个,因为他懒得注册,但我自己无法理解.

Nea*_*eal 7

您需要将代码放在onload函数中.

例如:

window.onload = function() {
    c = document.getElementById('canvas');
    ctx = c.getContext("2d");
    ctx.fillRect(10,10,10,10);
};
Run Code Online (Sandbox Code Playgroud)

这样做的原因是因为javascrpt代码将在渲染之前运行<canvas>,并且您希望它在后面运行.

演示:http://jsfiddle.net/maniator/nCf7Y/