안녕하세요.
이번 시간에는 Fabric.js 라는 라이브러리를 사용해서 화이트보드를 만들어보겠습니다.
1. Fabric.js 란?
Fabric.js는 HTML5 캔버스(Canvas)를 쉽게 조작하고 상호작용할 수 있도록 도와주는 오픈 소스 자바스크립트 라이브러리입니다. 더 자세히 알고 싶으시면 아래 공식홈페이지를 참고해주세요.
Fabric.js Javascript Canvas Library
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands of simple paths or good old images You can add text and dynamically manipulate its size, alignment,
fabricjs.com
2. 전체 코드
전체 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캔버스 그리기</title>
<!-- CDN에서 Fabric.js 라이브러리를 가져옵니다. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
<div>
<!-- 그림 색상을 선택하는 버튼들 -->
<button id="black">BLACK</button>
<button id="red">RED</button>
<button id="blue">BLUE</button>
<button id="erase">ERASE</button>
<!-- 검정 테두리가 있는 그림을 그릴 캔버스 요소 -->
<canvas id="canvas" width="800" height="600" style="border: 2px solid black;"></canvas>
</div>
<script>
// Fabric.js 캔버스 객체를 저장할 변수를 선언합니다.
let canvas;
// HTML 문서가 완전히 로드될 때까지 기다린 후 코드를 실행합니다.
document.addEventListener("DOMContentLoaded", function () {
// 지정된 크기와 초기 설정으로 Fabric.js 캔버스를 생성합니다.
canvas = new fabric.Canvas("canvas", {
width: 800,
height: 600,
isDrawingMode: true, // 그리기 모드 활성화
backgroundColor: "white", // 캔버스 배경색을 흰색으로 설정
});
// 기본 그리기 브러시 너비와 색상을 검정으로 설정합니다.
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "black";
// "검정" 버튼 클릭에 대한 이벤트 리스너
document.getElementById("black").addEventListener("click", () => {
// 그리기 브러시 너비와 색상을 검정으로 변경합니다.
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "black";
});
// "빨강" 버튼 클릭에 대한 이벤트 리스너
document.getElementById("red").addEventListener("click", () => {
// 그리기 브러시 너비와 색상을 빨강으로 변경합니다.
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "red";
});
// "파랑" 버튼 클릭에 대한 이벤트 리스너
document.getElementById("blue").addEventListener("click", () => {
// 그리기 브러시 너비와 색상을 파랑으로 변경합니다.
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = "blue";
});
// "지우개" 버튼 클릭에 대한 이벤트 리스너
document.getElementById("erase").addEventListener("click", () => {
// 그리기 브러시 너비를 크게 설정하여 지우개 효과를 시뮬레이트하고
// 색상을 캔버스 배경색으로 설정합니다.
canvas.freeDrawingBrush.width = 50;
canvas.freeDrawingBrush.color = canvas.backgroundColor;
});
});
</script>
</body>
</html>
3. 결과
'JavaScript' 카테고리의 다른 글
| [JavaScript] ChatGPT API로 간단한 챗봇 만들기 (0) | 2023.11.17 |
|---|---|
| [JavaScript] Phaser Sprite Player 캐릭터 바로 위에 nickName 가운데 정렬로 띄워주기 (0) | 2023.11.12 |
| [javascript] 마우스 이벤트를 이용하여 옮겨다니는 포스트잇 만들기 (2) | 2023.10.29 |
| [JavaScript] Phaser 객체에 애니메이션 적용하기 (0) | 2023.10.24 |
| [javascript] 분할 슬라이드 만들기 (0) | 2023.10.18 |
