javascript - 如何在使用 Fabric 的同时使用 css 更改 Canvas 的高度和宽度

Question

正如标题所说的一切。我想更改 HTML5 Canvas 的大小。我正在使用 Fabricjs 库来处理 HTML5 Canvas 。然而，fabricjs 使 Canvas 的尺寸变小。现在我想使用 css 调整它的大小，但它不会影响它。当我向 Canvas 提供其他 css 规则时，它确实会影响但不会影响宽度和高度。

jsfiddle

这是我的fabricjs代码

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: 'red',
    width: 100,
    height: 100
});

canvas.add(rect);

这是我的 html

<canvas id="c"></canvas>

这是我的 CSS

#c {
    width: 100%;
    border: 1px solid green;
}

Answer 1

找到答案了。以下解决方案对我有用

var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);

第二个解决方案是

<canvas id="c" width="900" height="600"></canvas>