0 
<!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>

我在 Chrome 和 IE 9 上试过这个，但它们都没有显示任何东西。你知道为什么这不起作用吗？

这可能是一些愚蠢的事情，我的朋友要求我发布这个，因为他懒得注册，但我自己无法弄清楚。

4

4 回答 4

7

您需要将代码放入onload函数中。

例如：

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

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

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

于 2012-11-27T16:56:13.997 回答
4

这里的语法错误：

ctx = c.getContext("2d")'

改成：

ctx = c.getContext("2d");

此外，您需要使用文档对象：

c = document.getElementById('canvas');
于 2012-11-27T16:56:38.247 回答
3

您缺少“文档”。

var c = document.getElementById('canvas');

于 2012-11-27T16:57:37.347 回答
2

脚本运行时画布不存在。移动<canvas>标签，使其位于标签之前<script>。

于 2012-11-27T16:56:21.360 回答