1. Raphaël 라이브러리를 웹 페이지에 추가합니다. 다음과 같이 <script> 태그를 사용하여 Raphaël을 로드할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

1. Raphaël을 사용하여 도형을 그립니다. 다음은 Raphaël을 사용하여 웹 페이지에 원을 추가하는 예제 코드입니다.

// Raphaël을 초기화합니다.
var paper = Raphael("canvas", 400, 400);

// 원을 그립니다. 중심 좌표는 (200, 200)이고 반지름은 100입니다.
var circle = paper.circle(200, 200, 100);

// 원을 스타일링합니다.
circle.attr({
  fill: "red",
  stroke: "black",
  "stroke-width": 2,
});

// 원에 이벤트 핸들러를 추가합니다.
circle.click(function() {
  alert("원을 클릭했습니다!");
});

1. Raphael("canvas", 400, 400) 코드에서 “canvas”은 도형을 그릴 요소의 ID입니다. 웹 페이지에 도형을 표시할 <div> 요소를 만들고 이를 “canvas”로 지정하면 됩니다.

<div id="canvas"></div>

위의 예제는 웹 페이지에 Raphaël을 사용하여 원을 그린 후, 원을 클릭하면 알림창이 뜨도록 구성한 것입니다. Raphaël은 다양한 도형 및 기능을 제공하므로, 필요에 따라 다양한 형태의 도형을 추가하고 상호작용할 수 있습니다.