如何使用 FabricJS 创建带有 Circle 对象的画布?
fabricjsjavascripthtml5 canvas
在本教程中,我们将学习如何使用 FabricJS 创建带有 Circle 对象的画布。Circle 是 FabricJS 提供的各种形状之一。为了创建一个圆圈,我们必须创建一个 fabric.Circle 类的实例并将其添加到画布中。
语法
new fabric.Circle({ radius: Number }: Object)
参数
选项(可选) − 此参数是一个 对象,它为我们的对象提供额外的自定义。使用此参数,可以更改与圆相关的属性(例如颜色、光标、笔触宽度和许多其他属性),其中 radius 是该圆的一个属性。
选项键
radius − 此属性接受一个 Number,该数字确定圆的半径。如果我们不指定半径,我们的圆将不会显示在画布上。
示例 1
创建 fabric.Circle() 的实例并将其添加到画布
让我们看一个例子,了解如何将一个圆圈添加到画布。这里我们创建了一个半径为 50px 的圆圈。 stroke 属性表示边框颜色,strokeWidth 指定边框宽度。我们使用天蓝色填充对象,其十六进制值为 #80daeb。
<!DOCTYPE html> <html> <head> <!-- 添加 Fabric JS 库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>使用 FabricJS 创建带有圆圈的画布</h2> <p>这里我们在画布上创建了一个半径为 50px 的圆圈。此外,我们使用了 <b>fill</b> 和 <b>stroke</b> 属性为其主体和轮廓着色。</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); // 创建 fabric.Circle 类的实例 var circle = new fabric.Circle({ left: 215, top: 100, radius: 50, fill: "#80daeb", stroke: "#00b7eb", strokeWidth: 2, }); // 将其添加到画布 canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
示例 2
使用 set 方法操作 Circle 对象
在此示例中,我们使用 set 方法(一个值的设置器)将属性分配给圆圈。任何与笔触、strokeWidth、半径、缩放、旋转等相关的属性都可以使用此方法进行变异。
<!DOCTYPE html> <html> <head> <!-- 添加 Fabric JS 库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>使用 FabricJS 创建带有圆圈的画布</h2> <p>这里我们使用了 <b>set</b> 方法创建一个半径为 40px 的圆圈,然后用颜色填充该对象。</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle(); canvas.add(circle); // 使用set设置属性 circle.set("radius", 40); circle.set("fill", "green"); circle.set({ stroke: "rgba(133, 187, 101, 0.7)", strokeWidth: 4 }); circle.set("left", 50); circle.set("top", 50); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>