如何在运行时（或动态）更改画布高度宽度

Question

我正在使用HTML5和javascript。无论何时我画任何形状，我都会制作画布。

我有一个显示文档的画布。如果我正在绘制矩形，那么我将添加一个不同的画布（作为REQUIREMENT）。

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();
  }