2012-04-07 104 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