Question

<!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上试过这个，但它们都没有显示任何内容。你知道为什么这不起作用吗？

这可能是愚蠢的事情，我的朋友要求我发布这个因为他懒得注册，但我自己也搞不清楚。

Answer 1

您需要将代码放在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/

Answer 2

语法错误：

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

更改为：

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

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

c = document.getElementById('canvas');

Answer 3

你错过了'文件'。

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

Answer 4

脚本运行时画布不存在。移动<canvas>代码，使其之前 <script>代码。

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

4 个答案: