在本文中，我们将使用fabricjs创建一个画布，但在此之前，让我们了解一下什么是画布。为了在网页上绘制图形，我们有一个名为canvas api的web api。这个api适用于绘制基本形状，但是添加交互或绘制复杂形状变得非常困难。因此，fabricjs出现了，它是建立在canvas api之上的库。要使用fabricjs，首先需要做的是创建一个fabricjs画布。
语法new fabric.canvas(element: htmlelement|string, options: object)
参数element − 此参数是<canvas>元素本身，可以使用document.getelementbyid()或<canvas>元素本身的id来获取。fabricjs画布将在此元素上初始化。
options (可选) − 此参数是一个对象，提供了对画布的其他自定义。使用此参数，我们可以更改画布的不同属性，如颜色、光标、边框宽度等。
示例1将id作为字符串传递
让我们看一个使用fabricjs创建画布的代码示例。由于fabricjs是在canvas api之上工作的，我们将使用<canvas>标签创建一个html元素，并给它一个id。然后，我们将该id传递给fabricjs api，以便它可以在<canvas>标签上初始化fabricjs canvas实例。
<!doctype html><html><head> <!-- adding the fabricjs library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"> </script></head><body> <h2>how to create a canvas using fabricjs</h2> <p>select an area inside the canvas and you will get a highlighted section.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
示例2将元素作为htmlelement传递
我们可以使用document.getelementbyid()获取元素，而不是直接将id传递给fabricjs api，然后将该元素传递给fabricjs api，如下所示−
<!doctype html><html><head> <!-- adding the fabricjs library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"> </script></head><body> <h2>how to create a canvas using fabricjs</h2> <p>select an area inside the canvas and you will get a highlighted section.</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var element = document.getelementbyid('canvas'); var canvas = new fabric.canvas(element); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); </script></body></html>
以上就是如何使用fabricjs创建画布？的详细内容。