CoDream

캔버스(Canvas) ??? 본문

HTML-CSS/HTML-CSS 이론

캔버스(Canvas) ???

코잠 2024. 4. 28. 10:33
728x90
반응형

 

 

캔버스(Canvas) 

HTML 요소 중 하나로, 그래픽을 그리기 위한 도구입니다.

 

HTML5에서 추가되었으며, JavaScript를 사용하여 동적으로 그래픽을 생성하고 조작할 수 있습니다.

기본적으로 캔버스는 비트맵 그래픽을 다루며, 픽셀 단위로 작업합니다.

 

캔버스 요소는 <canvas> 태그를 사용하여 정의되며, width와 height 속성을 통해 크기를 지정할 수 있습니다.

캔버스를 사용하여 그래픽을 그리려면 JavaScript를 사용하여 캔버스 컨텍스트(Canvas Context)를 가져와야 합니다.

캔버스 컨텍스트는 getContext() 메서드를 사용하여 얻을 수 있으며, 2D 그래픽을 그리기 위해서는 "2d"를 인자로 전달합니다.

 

캔버스를 사용하여 그릴 수 있는 그래픽에는 선, 도형(원, 사각형 등), 텍스트, 이미지 등이 포함됩니다.

JavaScript를 사용하여 캔버스 컨텍스트의 다양한 메서드를 호출하여 그래픽을 그릴 수 있습니다.

 

캔버스(Canvas)  예시

<!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="200"></canvas>

<script>
// 캔버스 컨텍스트 가져오기
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 사각형 그리기
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 텍스트 그리기
ctx.font = '20px Arial';
ctx.fillStyle = 'blue';
ctx.fillText('Hello, Canvas!', 150, 150);
</script>
</body>
</html>

728x90
반응형

'HTML-CSS > HTML-CSS 이론' 카테고리의 다른 글

Semantic Tags - 태그 명, 이름, 사용 방법  (2) 2024.05.02
제이쿼리(jQuery)  (2) 2024.04.22
Flexbox - 주요 특징, 속성, 사용방법  (0) 2024.04.15
CSS Grid - 구성 요소, 사용 방법  (0) 2024.04.15
[CSS] 절대 경로, 상대 경로  (0) 2024.04.15
'HTML-CSS/HTML-CSS 이론' Related Articles more