Fabric.js 如何改变画布圆形的背景颜色

Fabric.js的Circle类，是通过使用fabric.Circle对象来提供圆的形状。Circle对象用来提供圆的形状，圆是可移动的，它可以根据要求进行拉伸。对于笔触、颜色、宽度、高度和填充颜色，Circle都是可定制的。与canvas类相比，Circle类提供了丰富的功能。

在这里，我们使用Circle对象的backgroundColor属性来改变画布圆的背景颜色。我们可以通过定义该属性的值来改变背景色。

语法

以下是Circle – 的语法

fabric.Circle({
   radius: number,
   backgroundColor: string,
   fill: string,
   stroke: string,
   strokewidth: int
});

参数

radius – 用来指定圆的半径。
fill – 用来指定填充的颜色
stroke – 用来指定笔触的颜色
strokeWidth – 用于指定笔画的宽度
radius – 用来指定半径
backgroundColor – 指定背景的颜色

例子

在这个例子中，我们将初始化圆和画布的实例，它有助于使用backgroundColor属性来改变圆的背景颜色，并在画布上渲染出圆。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas circle</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Background color of Canvas Circle is changed to "yellow".</p>
      <canvas id="canvas" width="550" height="450" ></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var round = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 80,
            backgroundColor: 'yellow'
         });
         canvas.add(round);
      </script>
   </body>
</html>

正如我们在例子中看到的，这里我们使用了Fabric.js的Circle类，它是通过使用fabric.Circle对象来提供圆形的。在这里，我们把帆布圆的背景颜色改为黄色。

让我们再来看看另一个例子，我们将学习如何改变画布圆的背景颜色，画布圆有其主体和轮廓的颜色。

例子

我们将初始化Canvas和Circle的实例，它有助于使用backgroundColor属性来改变圆的背景颜色，并渲染Canvas圆。在圆环类对象下，我们定义了填充、描边、描边宽度、左边、上面、半径和背景颜色等属性，这些属性为圆环主体和轮廓提供了颜色。

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas circle</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Background color of Canvas Circle is changed to "green".</p>
      <canvas id="canvas" width="600" height="300" style="border:1px solid #00008B"></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var round1 = new fabric.Circle({
            radius: 80,
            left: 180,
            top: 80,
            fill: "#70daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: 'green'
         });
         canvas.add(round1);
      </script>
   </body>
</html>