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

【问题标题】：How to use the fabric.js library with the online library url?如何将 fabric.js 库与在线库 url 一起使用？
【发布时间】：2022-09-29 16:30:08
【问题描述】：

我试图插入 Fabric.js 库来测试一些东西：

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

但显然剂量不起作用...

我只是想做一个基本的免费画布，例如：

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

但是我的项目上仍然没有出现任何东西，我不能做或画任何东西..

有人有一些答案吗？

您在控制台中有任何错误吗？

标签： javascript fabricjs

【解决方案1】：

我认为您需要 html 的 canvas 元素才能使 fabricjs 工作。有两种方法可以解决这个问题

选项 1. - 在 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. - 使用 javascript 在 html 中添加 canvas 元素。

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

&lt;script src='https://unpkg.com/fabric@latest/dist/fabric.js'&gt;&lt;/script&gt;

【讨论】：