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

+0

@矩形がダブルクリックで追加されないようにする – mainajaved

+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

関連する問題