FabricJS を使用して背景色付きのキャンバスを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

FabricJS を使用して背景色付きのキャンバスを作成するにはどうすればよいですか?

王林

リリース： 2023-09-14 20:09:08

転載

638 人が閲覧しました

如何使用 FabricJS 创建具有背景颜色的画布？

この記事では、FabricJS を使用して、指定された背景色のキャンバスを作成します。 FabricJS API によって提供されるデフォルトの背景色は白ですが、2 番目のパラメーターを使用してカスタマイズできます。

構文

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)

ログイン後にコピー

パラメータ

要素 - このパラメータは
Options - このパラメータは、キャンバスに追加のカスタマイズ性を提供するオブジェクトであり、backgroundColor もその 1 つです、背景色のカスタマイズに役立ちます。

例 1

FabricJS を使用して背景色のキャンバスを作成する方法を見てみましょう。 FabricJS は Canvas API 上で動作するため、

さらに、その ID を FabricJS API に渡して、

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas with a background color using FabricJS</h2>
   <p>Here we have used &#39;cyan&#39; as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

例 2

別の例を挙げてみましょう。ここでは背景色を付けたキャンバスを作成し、そのキャンバス上にCircleオブジェクトを作成します。
えええええ
以上がFabricJS を使用して背景色付きのキャンバスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。