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

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

王林

풀어 주다： 2023-09-23 11:29:04

앞으로

1054명이 탐색했습니다.

如何使用 FabricJS 创建带有背景图像的画布？

이번 글에서는 FabricJS를 이용해 배경 이미지가 포함된 캔버스를 만들어 보겠습니다. FabricJS에는 캔버스의 배경 이미지를 변경하는 두 가지 방법이 있습니다.

첫 번째 방법은 Canvas 클래스 자체를 사용하고 BackgroundImage를 전달하는 것입니다.
두 번째 방법은 setBackgroundColor 메서드를 사용하는 것입니다. 예를 통해 이해해 봅시다.

방법 1: Canvas 클래스 사용

첫 번째 방법에서는 클래스의 두 번째 매개변수에 BackgroundImage를 전달하여 Canvas 클래스 자체를 사용합니다. Re Grammar

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

로그인 후 복사

매개변수

요소 - 이것은 요소 자체이며,
Options(선택 사항) - 이 매개 변수는 캔버스에 추가 사용자 정의를 제공하는 개체이며, BackgroundImage는 그 중 하나이며 배경 이미지를 사용자 정의하는 데 도움이 됩니다. BackgroundImage 지정된 캔버스 배경 이미지 값으로 fabric.Image를 사용합니다.

예제 1

FabricJS를 사용하여 배경 이미지가 있는 캔버스를 만드는 방법을 보여주는 다음 예를 확인하세요. FabricJS는 Canvas API 위에서 작동하므로

태그를 사용하여 HTML 요소를 생성하고 ID를 부여합니다. 또한
태그에서 FabricJS Canvas 인스턴스를 초기화할 수 있도록 해당 ID를 FabricJS API에 전달하고, 두 번째 매개변수에서는 키 backgroundImage와 해당 값을 이미지 URL로 사용하는 객체를 전달합니다.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2> Creating a Canvas with a Background Image in Fabric.js </h2> <canvas id="canvas"> </canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png", }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
로그인 후 복사