FabricJS를 사용하여 캔버스를 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

FabricJS를 사용하여 캔버스를 만드는 방법은 무엇입니까?

王林

풀어 주다： 2023-08-22 22:01:02

앞으로

838명이 탐색했습니다.

FabricJS를 사용하여 캔버스를 만드는 방법은 무엇입니까?

이 글에서는 FabricJS를 이용하여 캔버스를 만들어 보겠습니다. 하지만 그 전에 먼저 캔버스가 무엇인지 알아보겠습니다. 웹 페이지에 그래픽을 그리기 위해 Canvas API라는 웹 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>

로그인 후 복사