Fabric.js는 JavaScript 기반의 그래픽 라이브러리로, HTML5 캔버스를 사용하여 웹 페이지에 다양한 그래픽 요소를 그릴 수 있습니다. 이번 포스트에서는 Fabric.js를 사용하여 HTML5 캔버스에 원을 그리는 방법을 알아보겠습니다.
1. Fabric.js 설치
먼저, Fabric.js를 설치해야 합니다. 다음 명령을 사용하여 NPM을 통해 설치할 수 있습니다.
npm install fabric
2. HTML 문서에 Fabric.js 추가
다음으로, HTML 문서에 Fabric.js를 추가해야 합니다. <head> 태그 내부에 다음 코드를 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
3. 원 그리기
이제, Fabric.js를 사용하여 원을 그려보겠습니다. 다음 코드를 HTML 파일의 <body> 태그 내부에 추가합니다.
<canvas id="canvas" width="500" height="500"></canvas>
JavaScript 코드를 작성하여 원을 그릴 준비를 합니다. 다음 코드를 아래에 추가합니다.
// Canvas 요소 가져오기
var canvas = new fabric.Canvas('canvas');
// 원 생성하기
var circle = new fabric.Circle({
left: 100,
top: 100,
radius: 50,
fill: 'red'
});
// Canvas에 원 추가하기
canvas.add(circle);
위 코드에서는 Fabric.js의 fabric.Canvas 클래스를 사용하여 원을 그릴 수 있는 캔버스 요소를 가져옵니다. 이후에 fabric.Circle 클래스를 사용하여 원을 생성하고 원의 속성을 설정합니다. 마지막으로, canvas.add 메서드를 사용하여 원을 캔버스에 추가합니다.
이제 HTML 파일을 브라우저에서 열고 실행하면 캔버스에 빨간색 원이 그려져 있는 것을 확인할 수 있습니다.
4. 추가 설정
위에서는 기본적인 원을 그리는 방법을 알아보았습니다. Fabric.js를 사용하면 원을 그리는데 추가적인 설정을 적용할 수도 있습니다. 예를 들어, 원의 선 색상, 두께, 그림자 등을 변경할 수 있습니다.
다음은 원을 그릴 때 추가 설정을 적용하는 예제입니다.
var circle = new fabric.Circle({
left: 100,
top: 100,
radius: 50,
fill: 'red',
stroke: 'blue',
strokeWidth: 2,
shadow: 'rgba(0,0,0,0.5) 5px 5px 5px'
});
위 코드에서는 stroke 속성을 사용하여 원의 선 색상을 지정하고, strokeWidth 속성으로 선의 두께를 조절합니다. 또한, shadow 속성을 사용하여 그림자를 추가할 수 있습니다.
Fabric.js를 사용하면 다양한 그래픽 요소를 그릴 수 있으며, 원을 그리는 방법을 알아보았습니다. 추가 설정을 적용하면 보다 다양한 스타일의 원을 그릴 수 있습니다. 참고로, Fabric.js 공식 문서를 참조하면 더 다양한 사용법을 확인할 수 있습니다.