javascript - 実行時に（または動的に）キャンバスの高さの幅を変更する方法

Question

私は HTML5 と JavaScript を使用しています。形を描いているときはいつでもキャンバスを作っています。

ドキュメントが表示されているキャンバスがあります。長方形を描いている場合は、別のキャンバスを追加しています（要件として）。

var canvas= document.createElement('canvas');
canvas.style.position = "absolute";
canvas.id=this.annotationID;

canvas.style.left=""+this.x+"px";
canvas.style.top=""+this.y+"px";
canvas.height=this.h;
canvas.width=this.w;

document.getElementById("mainDIV").appendChild(canvas);

 var ctx = canvas.getContext("2d");
 ctx.strokeStyle='black';
 ctx.lineWidth=4;
 ctx.strokeRect(0,0,this.w,this.h);

上記のコードを使用して。キャンバスを作っています。

このキャンバスのサイズを変更する場合。サイズ変更ではありません。位置を変更できますが、高さと幅が更新されません。次の方法を使用しています:-

 selectedAnnCanvas.style.left=currentAnnLeft+"px";
 selectedAnnCanvas.style.top=currentAnnTop+"px";
 selectedAnnCanvas.setAttribute('width', currenAnnWidth);
 selectedAnnCanvas.setAttribute('height', currentAnnHeight);

よろしくお願いします。

編集------キャンバスコードのサイズ変更

ここでは、サイズを変更し、形状を移動するために 8 つの選択ポイントを描画しています。ここでは、次の 8 つのケースがあります。

if (isResizeDrag) {

    var annLeft=selectedAnnCanvas.style.left;
    annLeft=annLeft.substring(0, annLeft.length - 2);

    var annTop=selectedAnnCanvas.style.top;
    annTop=annTop.substring(0,annTop.length - 2);

    var annWidth=selectedAnnCanvas.width;

    var annHeight=selectedAnnCanvas.height;

    var oldx = annLeft;
    var oldy = annTop;

    var POS=getMousePos(canvas,e);
    mx=POS.x;
    my=POS.y;

//      alert('rdy');
    switch (expectResize) {
    case 0:
        if((annLeft+annWidth>mx) && (annTop+annHeight>my))
        {
            annLeft = mx;
            annTop = my;
            annWidth += oldx - mx;
            annHeight += oldy - my;


            selectedAnnCanvas.style.left=annLeft+"px";
            selectedAnnCanvas.style.top=annTop+"px";

            selectedAnnCanvas.setAttribute('width', annWidth);
            selectedAnnCanvas.setAttribute('height', annHeight);


        }
        break;
      case 1:
          if((annLeft+annWidth>mx) && (annTop+annHeight>my))
          {
              annTop = my;
              annHeight += oldy - my;

              selectedAnnCanvas.style.top=""+annLeft+"px";
              selectedAnnCanvas.height=annHeight;

          }
        break;
      case 2:
          if((annLeft<mx) && (annHeight+annTop>my))
          {
              annHeight = my;
              annWidth = mx - oldx;
              annHeight += oldy - my;

              selectedAnnCanvas.width=annWidth;
              selectedAnnCanvas.height=annHeight;
          }
          break;
      case 3:
          if((annLeft+annWidth>mx))
          {
              annLeft = mx;
              annWidth+= oldx - mx;

              selectedAnnCanvas.style.left=""+annLeft+"px";
              selectedAnnCanvas.width=annWidth;
          }
        break;
      case 4:
          if((annLeft<mx))
          {
              annWidth = mx - oldx;
              selectedAnnCanvas.width=annWidth;
          }
        break;
      case 5:
          if((annLeft+annWidth>mx) && (annTop<my))
          {
              annLeft = mx;
              annWidth += oldx - mx;
              annHeight = my - oldy;

              selectedAnnCanvas.style.left=""+annLeft+"px";
              selectedAnnCanvas.width=annWidth;
              selectedAnnCanvas.height=annHeight;
          }
        break;
      case 6:
          if((annTop<my))
          {
              annHeight = my - oldy;

              selectedAnnCanvas.height=annHeight;
          }
        break;
      case 7:
          if(annLeft<mx && annTop<my)
          {
              annWidth = mx - oldx;
              annHeight = my - oldy;

              selectedAnnCanvas.width=annWidth;
              selectedAnnCanvas.height=annHeight;
          }
        break;
    }
    invalidate();
  }