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

王林
풀어 주다: 2023-09-14 20:09:08
앞으로
626명이 탐색했습니다.

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

이번 글에서는 FabricJS를 이용하여 주어진 배경색의 캔버스를 만들어 보겠습니다. FabricJS API에서 제공하는 기본 배경색은 흰색이며 두 번째 매개변수를 사용하여 사용자 정의할 수 있습니다.

Syntax

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)
로그인 후 복사

Parameters

  • Element - 이 매개변수는 요소 자체입니다. document.getElementById() 또는 를 사용할 수 있습니다. 요소 자체의 ID 파생됨 . FabricJS 캔버스는 이 요소에서 초기화됩니다.

  • Options - 이 매개변수는 캔버스에 추가 사용자 정의 기능을 제공하는 개체이며 backgroundColor는 그 중 하나이며 배경 색상을 사용자 정의하는 데 도움이 됩니다.

예 1

방법을 살펴보겠습니다. FabricJS를 사용하여 배경색으로 캔버스를 만듭니다. FabricJS는 Canvas API 위에서 작동하므로 태그를 사용하여 HTML 요소를 생성하고 id를 할당합니다.

또한 태그에서 FabricJS Canvas 인스턴스를 초기화할 수 있도록 해당 ID를 FabricJS API에 전달합니다. 두 번째 매개변수에서는 BackgroundColor 키와 원하는 색상 값이 포함된 객체를 전달합니다.

<!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 객체를 생성하겠습니다.

rreee

위 내용은 FabricJS를 사용하여 배경색으로 캔버스를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!