1. HTML 캔버스(Canvas) 예제
HTML의 캔버스 <canvas> 요소를 사용해 비트맵 이미지를 그릴 수 있는 2D 그래픽 API 입니다. 주로 Javascript를 통해서 동적으로 그래픽을 렌터링합니다.
- 사용 방법:
- HTML에 <canvas> 요소 추가: HTML 문서에 <canvas> 태그를 추가해. width와 height 속성으로 크기를 지정하고, style 속성으로 테두리를 설정할 수 있습니다.
- Javascript로 그래픽 그리기: JavaScript를 사용해 캔버스의 2D 컨택스트를 가져와, 다양한 메소드를 사용해 그래픽을 그립니다.
- 기능 및 옵션:
- 2D 컨텍스트: getContext('2d') 메소드로 2D 렌더링 컨텍스트를 얻음
- 선 그리기: beginPath(), moveTo(x, y), lineTo(x, y), stroke() 메소드를 사용해 선을 그림
- 원 그리기: arc(x, y, radius, startAngle, endAngle) 메소드를 사용해 원을 그림.
- 텍스트 그리기: fillText(text, x, y) 메소드를 사용해 텍스트를 그림
- 스타일링 옵션:
- 색상 및 스타일: fillStyle, storkeStyle 속성을 사용하여 색상 및 선의 스타일을 설정
- 글꼴 설정: font 속성을 사용해 텍스트의 글꼴 스타일을 설정
- 이미지 처리: drawImage(image, x, y) 메소드를 사용해 이미지를 캔버스에 그림
- 애니메이션: requestAnimationFrame()을 사용하여 부드러운 애니메이션을 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas example</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 사각형 그리기
ctx.fillStyle = 'blue';
ctx.fillRect(50,50,200, 100);
// 텍스트
ctx.fillStyle = 'white';
ctx.font = "20px Arial";
ctx.fillText('Hello Canvas!', 70, 100);
</script>
</body>
</html>2. SVG (Scalable Vector Graphics)
SVG는 XML 기반의 백터 그래픽 형식으로, 그래픽을 수학적으로 표현합니다. 각 요소는 DOM의 객체로 다룰 수 있어, 쉽게 수정이 가능하고 애니메이션을 적용할 수 있습니다.
- 사용 방법:
- HTML에 <svg> 요소 추가: HTML 문서에 <svg> 태그를 추가하고, width와 height 속성으로 크기를 설정함
- 도형 및 텍스트 추가: <rect>, <circle>, <text> 등 SVG 요소를 사용해 그래픽을 정의함, 각 요소의 속성을 추가해 스타일을 지정할 수 있음
- 도형 요소
- 사각형: <rect> 태그를 사용하여 사각형을 그림. x,y,width,height, fill 속성으로 스타일을 설정
- 원: <circle> 태그를 사용하여 원을 그림, cx,cy,r,fill 속성으로 스타일을 설정
- 타원: <ellipse> 태그를 사용하여 타원을 그림, cx,cy,rx,ry,fill 속성으로 스타일 설정
- 선: <line> 태그를 사용하여 선을 그립니다. x1,y1,x2,y2,stroke 속성으로 스타일을 설정
- 다각형: <polygon> 태그를 사용해 다각형을 그림, points 속성으로 꼭지점을 정의
- 텍스트: <text> 태그를 사용해 텍스트를 추가할 수 있음. x,y,font-family, font-size, fill 속성으로 스타일을 설정
- 스타일링
- CSS 사용: SVG 요소는 CSS를 사용하여 스타일을 적용할 수 있음
- 애니메이션: <animate> 태그를 사용하여 애니메이션 효과를 추가할 수 있음
- 상호작용: JavaScript를 통해 SVG 요소에 이벤트 리스너를 추가하여 사용자와의 상호작용을 구현할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg</title>
</head>
<body>
<svg width="400" height="400" style="border: 1px solid #000000">
<!-- 사각형 -->
<rect x="50" y="50" width="200" height="100" fill="blue"></rect>
<!-- 원 -->
<circle cx="150" cy="200" r="50" fill="red" />
<!--텍스트 -->
<text x="70" y="100" font-family="Arial" font-size="20" fill="white">SVG PR</text>
</svg>
</body>
</html>요약
- HTML 캔버스:
- 픽셀 기반으로 동적인 그래픽을 그리기 위한 API.
- 다양한 그래픽 요소를 그릴 수 있는 메소드 제공
- 애니메이션 및 이미지 처리에 강력함.
- SVG:
- 백터 기반으로 정적인 그래픽 및 인터랙티브 요소를 구현
- 다양한 도형과 텍스트 요소를 쉽게 추가하고 스타일링 가능.
- CSS와 JavaScript를 통해 상호작용 및 애니메이션을 쉽게 적용할 수 있음.
LIST
'Front-End > HTML' 카테고리의 다른 글
| [HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법 (0) | 2025.02.26 |
|---|---|
| [HTML] HTML과 XHTML의 차이점 (0) | 2025.02.16 |
| [HTML] 6.HTML nav, ol, option, span, strong (0) | 2025.02.01 |
| [HTML] 5.HTML label 요소, legend, 리스트, 링크 스타일,메뉴 (1) | 2025.02.01 |
| [HTML] 4.HTML form 요소 , dl, 텍스트 강세, 제목, 헤더, footer (1) | 2025.01.29 |