为什么不显示此HTML5画布？

<!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上试过了，它们都没有显示任何东西。你知道为什么不工作？为什么不显示此HTML5画布？

这可能是一些愚蠢的事情，我的朋友要求我张贴这个，因为他懒得注册，但我自己弄不明白。

来源

2012-11-27 Alice

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

例如：

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

这样做的原因是因为你javascrpt代码将运行的<canvas>呈现之前，你希望它运行后记。

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

来源

2012-11-27 16:56:13 Neal

画布是不存在的脚本运行时。将<canvas>标记移动到之前<script>标记。

来源

2012-11-27 16:56:21

语法错误的位置：

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

更改为：

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

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

c = document.getElementById('canvas');

来源

2012-11-27 16:56:38 ServerBloke

你错过了 '文件'。

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

来源

2012-11-27 16:57:37 sourRaspberri

为什么不显示此HTML5画布？

回答

相关问题