fabric.js库如何与在线库url一起使用？

Question

I'm trying to insert the Fabric.js library to test some things with:

    <script src='https://unpkg.com/fabric@latest/dist/fabric.js'></script>

But apparently dosen't work...

I'm just trying to do a basic free canvas like:

var canvas = this.__canvas = new fabric.Canvas('c', {
  isDrawingMode: true
});

var rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red',
});
canvas.add(rect);
canvas.renderAll();

But still nothing appears on my project, i can't do or paint anything..

Anyone with some answers?

Answer 1

I think you need canvas element the html in order for fabricjs to work. There are two ways to fix achieve this

1. Option 1. - Add canvas element in html. <canvas id="c"/>

 var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true }); var rect = new fabric.Rect({ top: 100, left: 100, width: 60, height: 70, fill: 'red', }); canvas.add(rect); canvas.renderAll();

 canvas { border-style: groove; }

 <canvas id="c" /> <script src='https://unpkg.com/fabric@latest/dist/fabric.js'></script>

2. Option 2. - Add canvas element in html using javascript.

    var mycanvas = document.createElement("canvas"); mycanvas.id = "mycanvas"; document.body.appendChild(mycanvas);

 var mycanvas = document.createElement("canvas"); mycanvas.id = "c"; document.body.appendChild(mycanvas); var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true }); var rect = new fabric.Rect({ top: 100, left: 100, width: 60, height: 70, fill: 'red', }); canvas.add(rect); canvas.renderAll();

 canvas { border-style: groove; }

 <script src='https://unpkg.com/fabric@latest/dist/fabric.js'></script>