웹사이트에 대화형 요소를 추가해야 하는 경우 Canvas용 무료 라이브러리를 사용하면 작업을 쉽게 수행할 수 있습니다. 먼저 HTML5에서 캔버스를 만드는 방법에 대해 알아보겠습니다.
HTML
HTML5로 캔버스를 생성하는 다음 코드를 실행할 수 있습니다.
예시
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "myCanvas"> </canvas>
<script>
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html> 이제 웹사이트에 놀라운 효과를 추가하는 데 도움이 되는 HTML5의 Canvas용 무료 라이브러리를 살펴보겠습니다.
Fabric.js
Fabric.js는 캔버스 요소 위에 대화형 개체 모델을 제공하는 데 널리 사용되는 강력한 JavaScript HTML5 캔버스 라이브러리입니다.
Fabric.js를 사용하여 캔버스에 개체, 즉 단순한 기하학적 모양과 같은 개체를 만들고 채웁니다. 또한 모양에 그라데이션을 주기 쉽습니다. 텍스트를 쉽게 추가하고 정렬, 크기 등을 동적으로 조작합니다.
Paper.js
HTML5 Canvas 위에서 실행되는 오픈 소스 벡터 그래픽 스크립팅 프레임워크입니다.
Paper.js는 문서 개체 모델을 제공하여 레이어, 그룹, 경로 등으로 프로젝트를 쉽게 만들고 채웁니다. 경로를 만들고 세그먼트를 추가합니다. 경로는 곡선으로 연결된 일련의 세그먼트입니다.
세그먼트는 추가 후 쉽게 검사, 조작 및 이동할 수 있습니다. 세그먼트를 쉽게 제거할 수도 있습니다. 벡터 그래픽을 SV로 가져오고 내보내는 방법도 가져옵니다.
Chart.js
8가지 방법으로 데이터를 시각화하는 오픈 소스 JavaScript 라이브러리입니다. 모든 최신 브라우저에서 뛰어난 렌더링 성능을 제공합니다. 완벽한 스케일 세분성을 위해 창 크기 조정 시 차트를 쉽게 다시 그릴 수 있습니다.
Chart.js는 내장 차트를 제공하며 사용자 정의 차트로 쉽게 확장할 수 있습니다. 기본 제공 차트에는 선, 막대, 가로 막대, 분산형, 거품 등이 포함됩니다.