2012-04-07 107 views
0

我是新來的html5。我寫了一個在畫布上添加矩形的小代碼。當我雙擊畫布時,有些工作不正常,任何人都可以引導我,我在哪裏做錯了?形狀不畫在畫布上

<script> 
function init() { 
    var canvas2 = document.getElementById("canvas2"); 
    canvas2.ondblclick = doubleclickhandler; 

} 
function doubleclickhandler(){ 
     var canv = document.getElementById("canvas2"); 
     var ctx = canv.getContext("2d"); 
     ctx.fillStyle = "rbga(0,200,0,1)" ; 
     ctx.fillRect = (36,10,22,22); 
} 
</script> 
<style> 
#div2 
{ 
    float:left; 
    width:100px; 
    height:150px; 
    margin:10px; 
    border:1px solid #aaaaaa; 

} 
</style> 
<body onLoad="init()"> 
<div id= "div2"> 
<canvas id="canvas2" width="100" height="150" ></canvas>   
</div> 
</body> 
+1

請定義「它不工作」。 – Howard 2012-04-07 12:57:08

+0

@Hardard矩形沒有添加雙擊 – mainajaved 2012-04-07 13:02:40

+0

請注意,使用'onload'屬性 - 將HTML與JavaScript混合 - 並不是最佳做法。您應該將「

3

fillRect是一個函數,而不是一個屬性。你必須打電話給它。 AFAIK這是你唯一的錯誤。

<script> 
function init() { 
    var canvas2 = document.getElementById("canvas2"); 
    canvas2.ondblclick = doubleclickhandler; 

} 
function doubleclickhandler(){ 
     var canv = document.getElementById("canvas2"); 
     var ctx = canv.getContext("2d"); 
     ctx.fillStyle = "rbga(0,200,0,1)" ; 
     ctx.fillRect(36,10,22,22); 
} 
</script> 
<style> 
#div2 
{ 
    float:left; 
    width:100px; 
    height:150px; 
    margin:10px; 
    border:1px solid #aaaaaa; 

} 
</style> 
<body onLoad="init()"> 
<div id= "div2"> 
<canvas id="canvas2" width="100" height="150" ></canvas>   
</div> 
</body> 
+0

非常感謝 – mainajaved 2012-04-07 13:02:11