티스토리 뷰

HTML

HTML - canvas

gwni0214 2022. 2. 14. 09:14

 

HTML Canvas

    1. canvas는 html문서 내부에 그림을 그릴 수 있는 태그입니다. 우리가 div 태그 안에 이미지를 넣고 편집하듯이 사용한다고 생각하면 편하실거에요.

    2. 캔버스를 선언하고 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있습니다.

 

canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공합니다.

이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행합니다.

따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 합니다.

 

 

# canvas 사용 방법

    1. html 문서에 canvas 태그를 선언한다.

    2. canvas 태그에 id 속성을 설정한다.

    3. canvas 태그 내부에 width, height를 설정한다.

    4. canvas 내장 '그리기 객체'를 취득한다.  그리기 객체는 자바스크립트로 설정합니다.

    5. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다.

    6. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다.

    7. 자바스크립트를 통해 다양한 효과를 구현한다.

 

canvas 기초 예제 입니다.

캔버스 태그를 생성하고, 자바스크립트로 '사각형'을 그려보는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	/* 캔버스 테두리 설정 */
        #myCanvas{
            border: 1px solid black;
        }
    </style>
</head>

 <body>

     <!-- HTML -->
     <!-- 1. canvas 엘리먼트를 선언한다: id, widht, height를 태그 내에서 지정해준다. -->
    <canvas id="myCanvas" width="400" height="300"></canvas>
    

    <!-- Javascript -->
    <script>
        // 1. canvas 엘리먼트를 취득한다.
        const canvas = document.getElementById('myCanvas');

        // 2. 2d모드의 그리기 객체를 취득한다. => 이 객체를 통해 canvas에 그림을 그릴 수 있다.
        const ctx = canvas.getContext("2d");

        // 3. 색을 설정한다 => CSS에서 사용가능한 색깔로 지정하면 된다. #000000, black 등
        ctx.fillStyle = 'blue';

        // 4. 파란색 사각형을 그린다 => fillRect(x, y, width, height)
        ctx.fillRect(0, 0, 150, 75); // (0, 0)좌표에서 시작하여 가로 150, 세로 75의 사각형을 그린다.

    </script>
    
</body>
</html>

 

canvas 요소의 속성

canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간입니다.

그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 합니다.

 

canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용하면 됩니다.

 

 

 

 

 

 canvas 참고 사항

    1. canvas는 id값으로 접근할 수 있어야 한다.

    2. canvas의 크기(width, height)는 반드시 canvas 태그 내에 설정해야 한다.

        => CSS 사용시, 화면 왜곡 및 깨짐이 발생할 수 있다.

    3. canvas의 너비, 높이는 canvas.width, canvas.height로 취득 가능하다.

제일 간단한 사각형 만들기를 해보았구요. 다음에 다양한 예제 만들기로 찾아뵙겠습니다.

참고 출처: https://curryyou.tistory.com/323 [카레유]

참고 출처: http://tcpschool.com/

'HTML' 카테고리의 다른 글

HTML - input  (0) 2022.02.16
HTML - form 태그  (0) 2022.02.16
엔티티 코드 - Entity Code  (0) 2022.02.10
SVG  (0) 2022.02.08
시멘틱 태그  (0) 2022.01.26

UP NEXT : HTML

댓글
© 2018 webstoryboy