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

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

王林

リリース： 2023-08-22 22:01:02

転載

782 人が閲覧しました

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

この記事では、 FabricJS を使用してキャンバスを作成しますが、その前に、キャンバスとは何かを理解してください。 Web ページ上にグラフィックを描画するために、Canvas API と呼ばれる Web API があります。この API は基本的な形状を描画するのには問題ありませんが、インタラクションを追加したり、複雑な形状を描画したりするのは非常に困難になります。そこで、Canvas API 上に構築されたライブラリである FabricJS が登場しました。 FabricJS を使用するには、まず FabricJS キャンバスを作成する必要があります。

Syntax

new fabric.Canvas(element: HTMLElement|String, options: Object)

ログイン後にコピー

Parameters

element -このパラメータは要素自体は、document.getElementById() または要素自体の ID を使用して取得できます。 FabricJS キャンバスはこの要素で初期化されます。
options (オプション) -このパラメータは、キャンバスの追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、境界線の幅など、キャンバスのさまざまなプロパティを変更できます。

例 1

ID を文字列として渡す

FabricJS を使用してキャンバスを作成するコード例を見てみましょう。 FabricJS は Canvas 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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

例 2

要素を HTMLElement として渡す

document.getElementById() を使用して要素を取得できます。 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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var element = document.getElementById(&#39;canvas&#39;);
      var canvas = new fabric.Canvas(element);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

ログイン後にコピー

のようにその要素を FabricJS API に渡します。
以上がFabricJSを使用してキャンバスを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。