ホームページ > ウェブフロントエンド > jsチュートリアル > FabricJSを使用して三角形の塗りつぶしの色を設定するにはどうすればよいですか?

FabricJSを使用して三角形の塗りつぶしの色を設定するにはどうすればよいですか?

WBOY
リリース: 2023-08-27 19:41:07
転載
1325 人が閲覧しました

如何使用 FabricJS 设置三角形的填充颜色?

このチュートリアルでは、FabricJS を使用して塗りつぶしの色を変更することで、Triangle オブジェクトの外観を変更する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、Fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。

fill 属性を使用すると、オブジェクトの塗りつぶしの色を指​​定できます。

構文

new Fabric.Triangle({ fill: String }: Object)
ログイン後にコピー

パラメータ

  • オプション (オプション) - このパラメータは Object は、三角形に追加のカスタマイズを提供します。このパラメーターを使用すると、fill が属性であるオブジェクトに関連するプロパティ (色、カーソル、ストローク幅、その他の多くのプロパティなど) を変更できます。

  • < /ul>

    オプション キー

    • fill - このプロパティは string を受け入れ、これにより、オブジェクトの塗りつぶしの色。デフォルト値は rgb(0,0,0) で、黒です。

    #例 1

    三角形オブジェクトのデフォルトの塗りつぶし色< strong>

    使用方法を示すコード例を見てみましょう。 FabricJS の三角形オブジェクトのデフォルトの塗りつぶし色。三角形オブジェクトを作成するときに fill プロパティを完全にスキップすると、塗りつぶしの色で黒がレンダリングされます。

    < !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(三角形);
    
    
    
    ログイン後にコピー
    例 2

    fill 属性をキーとして渡す

    fill ということもできます。プロパティには、任意の色名または RGBA 値を指定します。この例では、「青」の値を指定し、それに応じて塗りつぶしの色を変更します。 えええええ

    以上がFabricJSを使用して三角形の塗りつぶしの色を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート