html 5畫布不起作用

我是html5的新手，現在我遇到了畫布問題。我嘗試使用畫布2d繪製一個矩形。在開發人員工具中，它顯示該畫布爲空。html 5畫布不起作用

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Canvas Testing</title> 
<script type="text/javascript"> 

    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 
    cxt.fillStyle="#FF0000"; 
    cxt.fillRect(0,0,150,75); 

</script> 

<style type="text/css"> 
    body{ 
     background:#ccc; 
     color:777; 
     font-size:14px; 
     font-family: verdana; 
    } 
    #myCanvas{ 
     margin:50px auto; 
     background:#eee; 
    } 
</style> 
</head> 
<body> 
    <canvas id="myCanvas" height="180" width="360"></canvas> 
</body> 
</html>

任何幫助，將不勝感激。在此先感謝...

來源

2011-07-22 Tepken Vannkorn

您需要將您的JavaScript放入由window.onload事件調用的函數中。

window.onload = function() { 
    var c=document.getElementById("myCanvas"); 
    var cxt=c.getContext("2d"); 
    cxt.fillStyle="#FF0000"; 
    cxt.fillRect(0,0,150,75); 
}

來源

2011-07-22 17:57:41 goldierox

我試着將javascript放在頁面的底部，它的工作原理是一樣的。謝謝你...... –

按照你的說法放置在底部也可以工作，使用window.onload也是一樣。一個要考慮的事情是，當調用onload的時候，它可以被其他腳本重載，並且可能會給其他腳本帶來意想不到的錯誤腳本。當我使用畫布時我做了什麼我在body標籤中調用了一個onload函數：該函數將在包含其元素（本例中爲畫布）的整個身體加載時調用並宣佈。未在函數中調用的JavaScript代碼只能用於在腳本之前聲明的元素，因此您的畫布爲空。 – Rickard

您的JS正在文檔初始化之前運行。

來源

2011-07-22 17:57:22 Hello71

html 5畫布不起作用

回答

相關問題