javascript函數不叫

大家好我是新來的html5，我寫了一個小代碼，我在我的畫布上使用java腳本顯示兩個矩形，但不知道我在做什麼錯誤，因爲我的rectagles不顯示在我的畫布任何一個可以指導我在這裏是我的代碼javascript函數不叫

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 
<style> 
#div2 
{ 
    float:left; 
    width:100px; 
    height:200px; 
    margin:10px; 
    padding:10px; 
    border:1px solid #aaaaaa;} 

</style> 

<body> 

<div id= "div2"> 
<canvas id="canvas" width="100" height="150"></canvas> 

</div> 
<script type="text/javascript"> 

function init() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50);} 

init(); 
</script> 
</body> 
</html>

來源

2012-03-28 mainajaved

似乎就好了工作：http://jsfiddle.net/YEErC/ – 2012-03-28 12:34:44

您必須使用新版瀏覽器試試吧（所以，不是IE <9）對你的幫助 – 2012-03-28 12:44:56

好，謝謝（ 'init（）'！），這沒有幫助。 – mainajaved 2012-03-28 12:54:40

-1

什麼瀏覽器&版本您使用的？在此期間，你可以嘗試以下方法：

嘗試移動你的腳本代碼的<head></head>部分，然後onload屬性添加到<body>標籤，就像這樣：

<body onload="init()">

來源

2012-03-28 12:36:06

即使你的語法是正確的 – Quentin 2012-03-28 12:37:48

@Quentin，你說得對。我錯過了OP腳本底部的'init（）'調用。我仍然相信我的回答提供了一個更好的解決方案，可以將javascript放在''內，並且還可以通過丟棄它來間接解決任何未發現的OP實現問題。 – 2012-03-28 12:43:22

在之前立即放置腳本是確保腳本在DOM中的所有元素都可用之後運行而不等待圖像加載或允許腳本阻止加載內容的非常常見的模式。 – Quentin 2012-03-28 12:44:47

function init() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "rgb(200,0,0)"; 
     ctx.fillRect (10, 10, 55, 50); 

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
     ctx.fillRect (30, 30, 55, 50);} 

init();

來源

2012-03-28 12:38:14

將您的畫布元素指定給變量 – 2012-03-28 12:38:53

您忘記在函數中添加以下代碼 'var canvas = document.getElementById（「canvas」）;' – 2012-03-28 12:48:49

也許你在頁面加載之前調用您的腳本。

試試這個：

window.onload = init;

你也應該嘗試從螢火蟲調用的init（）後，頁面完全加載。這個對我有用。

來源

2012-03-28 12:47:52

感謝您的幫助 – mainajaved 2012-03-28 12:54:02

歡迎您:) – 2012-03-29 06:30:29

javascript函數不叫

回答

相關問題