ホームページ > ウェブフロントエンド > jsチュートリアル > FabricJS を使用して画像の不透明度を設定するにはどうすればよいですか?

FabricJS を使用して画像の不透明度を設定するにはどうすればよいですか?

WBOY
リリース: 2023-08-24 23:53:10
転載
1006 人が閲覧しました

FabricJS を使用して画像の不透明度を設定するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用して画像の不透明度を設定する方法を学びます。私たち 画像オブジェクトは、fabric.Image のインスタンスを作成することで作成できます。それはの一つなので FabricJS の基本要素。プロパティを適用することで簡単にカスタマイズすることもできます 角度や不透明度など。画像の不透明度を設定するには、opacity プロパティを使用します。

###文法### リーリー

パラメータ

  • element - このパラメータは、HTMLImageElement、HTMLCanvasElement、HTMLVideoElement、または画像要素を表す文字列を受け入れます。文字列は URL である必要があり、画像としてロードされます。

  • オプション (オプション) - このパラメータは、オブジェクトに追加のカスタマイズを提供する オブジェクト です。このパラメータを使用すると、原点、ストローク幅、および不透明度が属性であるイメージ オブジェクトに関連するその他の多くのプロパティを変更できます。

  • コールバック (オプション) - このパラメータは、最後のフィルターが適用された後に呼び出される 関数 です。 #オプションキー

    opacity
  • - このプロパティは、制御を可能にする Number を受け入れます。 事。 opacity このプロパティのデフォルト値は 1 です。 画像オブジェクトのデフォルトの外観

    ###例###
  • コード例を見て、画像オブジェクトがデフォルト値でどのように見えるかを見てみましょう
不透明度

プロパティ。この例では、以下に示すように、不透明なキーは渡しません -

リーリー

opacity

属性をキーとして渡します ###例### この例では、

opacity

プロパティへの割り当てがどのように変化するかを見ていきます。 キャンバス内の画像オブジェクトの不透明度。ここでは不透明度として 0.3 を使用します。 画像オブジェクトを完全に不透明ではなく半透明に表示します。 ああああ

以上がFabricJS を使用して画像の不透明度を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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