3

次のコードを使用して正方形を描画しています。私はjavascriptが初めてです。次のコードの何が問題なのか誰か教えてください。正確な/正しい正方形を描画しません。正方形の辺/長さは、x と y の間で長い方でなければなりません。寸法の問題もあると思います。助けてください！

construct: function(pos,parent) {
      obj=Object.create(parent);
      obj.minx=obj.maxx=pos.x;
      obj.miny=obj.maxy=pos.y;
      if (fillColor!="inherit")
        obj.fillStyle=fillColor;
      if (strokeColor!="inherit")
        obj.strokeStyle=strokeColor;
      if (strokeThickness!="inherit")
        obj.lineWidth=strokeThickness;
      },
    draw: function(selected) {
      ctx.beginPath();
      ctx.fillStyle=this.fillStyle;
      ctx.strokeStyle=(selected) ?
                      "gray" : this.strokeStyle;
      ctx.lineWidth=this.lineWidth;

    ctx.rect(this.minx,this.miny,this.maxx,this.maxy);

      ctx.fill();
      if (selected) {
        ctx.moveTo(this.minx,this.miny);
        ctx.lineTo(this.maxx,this.maxy);
        ctx.moveTo(this.minx,this.maxy);
        ctx.lineTo(this.maxx,this.miny);
        }
      ctx.stroke();
      },
    mousedown: function(event) {
      downPos=event;
      square.construct(downPos,drawObject[containingBox4point(downPos)]);
      inDrag=true;
      },
    mousemove: function(event) {
      if (!inDrag)
      {
        drawPrevious();
        drawCursor(event,containingBox4point(event));
        return;
      }
      upPos=event;
      if (upPos.x>downPos.x) {
        obj.minx=downPos.x;
        obj.maxx=upPos.x +  Math.abs(obj.maxy - obj.miny);
        }
      else {
        obj.minx=upPos.x;
        obj.maxx=downPos.x +  Math.abs(obj.maxy - obj.miny);
        }
      if (upPos.y>downPos.y) {
        obj.miny=downPos.y;
        obj.maxy=upPos.y + Math.abs(obj.maxx - obj.minx);
        }
      else {
        obj.miny=upPos.y;
        obj.maxy=downPos.y + Math.abs(obj.maxx - obj.minx);
        }
      drawPrevious();
      obj.draw(containingBox(obj)==(-1));
      drawCursor(event,containingBox4point(upPos));
      }
4

3 に答える 3

-1

これは、Square を作成する単純な Javascript です。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();

</script> 

</body>
</html>

詳細なデザインについては、ここをクリックしてください。

于 2015-06-13T05:29:47.037 に答える