如何使用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 − 用于指定描边的宽度
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 Circle。在Circle类对象下，我们定义了fill、stroke、strokeWidth、left、top、radius和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 "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>