Question

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

Answer 1

ctx.fillRect = (36,10,22,22)是一项作业，而ctx.fillRect通常是一种方法，而不是一种属性。你需要像函数一样调用它：

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

Answer 2

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>

形状不在画布上绘制

2 个答案: