javascript - 在 Fabric js 中加载 Canvas 后如何更改 Canvas 宽度高度

Question

我想在加载后更改 Canvas 的宽度和高度。这可以吗？我想通过单击按钮或在页面加载中来完成。我有两个动态变量宽度和高度。

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  
    // create a rectangle with a fill and a different color stroke
    var rect = new fabric.Rect({
       left: 50,
       top: 50,
       width: 50,
       height: 50,
       fill: 'rgba(255,127,39,1)',
       stroke: 'rgba(34,177,76,1)',
       strokeWidth: 5
    });
    canvas.add(rect);
    canvas.renderAll();    
})();

function(){
  var c_width = 500px;
  var c_height= 600px;

}

<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="function()">change canvas </button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>

Answer 1

使用canvas.setDimensions设置 Canvas 的宽度/高度。

演示

var canvas = this.__canvas = new fabric.Canvas('canvas');

// create a rectangle with a fill and a different color stroke
var rect = new fabric.Rect({
   left: 50,
   top: 50,
   width: 50,
   height: 50,
   fill: 'rgba(255,127,39,1)',
   stroke: 'rgba(34,177,76,1)',
   strokeWidth: 5
});
canvas.add(rect);
canvas.renderAll();

function resizeCanvas(){
  canvas.setDimensions({
   width:500,
   height:600
  });
}

canvas{
  border:2px solid #000;
}

<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="resizeCanvas()">change canvas </button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>