How to set the fill color of a triangle using FabricJS?

In this tutorial, we will learn how to change the appearance of a Triangle object by changing its fill color using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.

We can use the fill attribute, which allows us to specify the color of the object's fill.

Syntax

new Fabric.Triangle({ fill: String }: Object)

Parameters

• Options (optional) - This parameter is a Object, which provides additional customization to our triangle. Using this parameter, you can change properties related to the object for which fill is an attribute, such as color, cursor, stroke width, and many other properties.

Option Key

• fill - This property accepts a string which allows us Change the object's fill color. Its default value is rgb(0,0,0), which is black.

Example 1

Default fill color for triangle objects

Let’s look at a code example that shows us how to use it in FabricJS The default fill color for triangle objects. If we skip the fill property entirely when creating the triangle object, it will render black with the fill color.

< !DOCTYPE html>






三角形对象的默认填充颜色
可以看到三角形的默认填充颜色是黑色


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Example 2

Passing the fill attribute as a key

We can also fill Property specifies any color name or RGBA value. In this example, we've given it a "blue" value, changing the fill color accordingly.

将 fill 属性作为键传递
可以看到三角形的填充颜色是蓝色


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
填充：“蓝色”，
});

// 将其添加到画布中
canvas.add(三角形);

The above is the detailed content of How to set the fill color of a triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!