Question

我使用FabricJS在画布上创建了一个巨大的画布并渲染了很多对象。它似乎在chrome上运行良好。但是，当我在Mozilla FireFox上执行相同操作时，屏幕上不会出现任何对象。在使用开发工具检查元素时，我看到对象已在下部画布上呈现，但屏幕上没有任何对象。

JS Fiddle - https://jsfiddle.net/abhroy/pf1LxyaL/

尝试使用chrome和FireFox上的小提琴，并使用JS将画布大小更改为6000 x 6000，对象在chrome上呈现，但不在firefox上呈现。我想知道这个的原因以及在给定大画布大小的情况下在FF上渲染对象的解决方案是什么。如果你在新的浏览器选项卡上尝试上面的代码而不是jsfiddle并检查元素会更好。我知道使用大型画布并不可取，但我正在尝试一个特定的案例。

Answer 1

在初始化画布设置宽度和高度时。这是jsfiddle

<强> 样本

＆＃13;

function init() {
  var count = 0;
  canvas = new fabric.Canvas('c', {
    width: 1300,
    height: 1000
  });
  var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 100,
    height: 100,
  });
  canvas.add(rect);
}
init();

＆＃13;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.js"></script>
<body>
<div class="canvas-div">
	<canvas id="c" style="border:1px solid black"></canvas>
</div>

＆＃13;

FabricJS：大画布使对象在下部画布上呈现，但浏览器屏幕上不显示任何对象

1 个答案: