Javascript 形状不是在画布上绘制的_Javascript_Html_Mouseevent

Javascript 形状不是在画布上绘制的

javascript html

Javascript 形状不是在画布上绘制的,javascript,html,mouseevent,Javascript,Html,Mouseevent,我是html5新手。我编写了一个小代码，在画布上添加一个矩形。当我在画布上双击时，它是如何不起作用的？有人能告诉我哪里做错了吗 <script> function init() { var canvas2 = document.getElementById("canvas2"); canvas2.ondblclick = doubleclickhandler; } function doubleclickhandler (){ var canv = do

我是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>


函数init（）{
var canvas2=document.getElementById（“canvas2”）；
canvas2.ondblclick=doubleclickhandler；
}
函数doubleclickhandler（）{
var canv=document.getElementById（“canvas2”）；
var ctx=canv.getContext（“2d”）；
ctx.fillStyle=“rbga（0200,0,1）”；
ctx.fillRect=（36,10,22,22）；
}
#第二组
{
浮动：左；
宽度：100px；
高度：150像素；
利润率：10px；
边框：1px实心#AAAAA；
}

ctx.fillRect=（36,10,22,22）

是一个赋值，而

ctx.fillRect

通常是一个方法，而不是属性。您需要像调用函数一样调用它：

ctx.fillRect(36, 10, 22, 22);

ctx.fillRect=（36,10,22,22）

是一个赋值，而

ctx.fillRect

通常是一个方法，而不是一个属性。您需要像调用函数一样调用它：

ctx.fillRect(36, 10, 22, 22);

fillRect

是一个函数而不是属性。你得叫它。那是你唯一的错误

<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>


函数init（）{
var canvas2=document.getElementById（“canvas2”）；
canvas2.ondblclick=doubleclickhandler；
}
函数doubleclickhandler（）{
var canv=document.getElementById（“canvas2”）；
var ctx=canv.getContext（“2d”）；
ctx.fillStyle=“rbga（0200,0,1）”；
ctx.fillRect（36,10,22,22）；
}
#第二组
{
浮动：左；
宽度：100px；
高度：150像素；
利润率：10px；
边框：1px实心#AAAAA；
}

fillRect

是一个函数而不是属性。你得叫它。那是你唯一的错误

<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>


函数init（）{
var canvas2=document.getElementById（“canvas2”）；
canvas2.ondblclick=doubleclickhandler；
}
函数doubleclickhandler（）{
var canv=document.getElementById（“canvas2”）；
var ctx=canv.getContext（“2d”）；
ctx.fillStyle=“rbga（0200,0,1）”；
ctx.fillRect（36,10,22,22）；
}
#第二组
{
浮动：左；
宽度：100px；
高度：150像素；
利润率：10px；
边框：1px实心#AAAAA；
}

请定义“它不工作”。@Howard双击时矩形不是附加的。请注意，使用

onload

属性将HTML与JavaScript混合使用不是最佳做法。相反，您应该将

块放在正文的末尾，或者在加载页面时使用JavaScript调用自身，例如

window.onload=function（）{/*此处的代码*/}

请定义“它不工作”@Howard矩形不是双击时添加的。请注意，将HTML与JavaScript混合使用

onload

属性不是最佳做法。相反，您应该将

块放在正文的末尾，或者在加载页面时使用JavaScript调用自身，例如

window.onload=function（）{/*此处的代码*/}

@Phrogz我接受它，但它说“6分钟后可以接受：）”@Phrogz我接受它，但它说“您可以在6分钟后接受：）”