爲什麼不顯示此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畫布？

回答

相關問題