如何使用 FabricJS 创建一个带有背景颜色的圆形？

在本教程中，我们将使用 FabricJs 创建一个具有背景色的圆形。圆形是 FabricJS 提供的各种形状之一。为了创建一个圆圈，我们必须创建一个 Fabric.Circle 类的实例并将其添加到画布中。backgroundColor属性允许我们为对象的背景指定颜色。它是方形容器（圆圈所在的位置）的颜色。

语法

new fabric.Circle({ backgroundColor: String }: Object)

参数

• 选项（可选）- 此参数是一个对象< /em> 为我们的对象提供额外的定制。使用此参数，可以更改与 Circle 相关的属性，例如颜色、光标、描边宽度和许多其他属性，其中backgroundColor是其属性。

选项键

• backgroundColor- 此属性接受String决定对象背景的颜色。该值可以是十六进制值、rgba 值或只是我们希望背景颜色的颜色名称。

示例 1

将backgroundColor属性作为具有十六进制值的键传递

让我们看一个使用十六进制颜色值向圆形对象分配背景颜色的示例。在此示例中，我们使用了十六进制颜色代码#d0db61，它是深卡其色。

     
  
Creating a circle with a background colour using FabricJS
 
Notice the dark-khaki background around the circle. It appears as we have applied the backgroundColor property and assigned it a Hex color code. 
    

Salin selepas log masuk

示例 2

将backgroundColor属性作为带有 rgba 值的键传递

我们可以使用RGBA（红色、蓝色、绿色和 alpha）值而不是十六进制颜色代码。 alpha 参数指定颜色的不透明度。在此示例中，我们使用了rgba 值 (255,0,0,0.7)，它是不透明度为 0.7 的红色。

     
  
Creating a circle with a background colour using FabricJS
 
Notice the orange-red background around the circle. Here we have used the backgroundColor property and assigned it an 'rgba' value. 
    

Salin selepas log masuk

Atas ialah kandungan terperinci 如何使用 FabricJS 创建一个带有背景颜色的圆形？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!