html5 canvas 태그 웹브라우저에 그래픽을 표현하기

웹페이지에 그래픽 요소를 추가할 때 canvas 태그를 사용한다. canvas 태그는 단순한 그래픽부터 역동적인 게임제작까지 가능하게 해 준다. canvas 태그로 웹페이지에 그래픽 영역을 지정하고 canvas api 를 이용하여 그래픽적 요소를 추가하고 동적인 움직임을 줄 수 있다.

html5 canvas 태그
웹브라우저에 그래픽 표현하기

html5를 이용해 웹페이지를 작성할 때 그래픽적인 요소를 추가하고 싶을 때가 있다.

canvas 태그는 웹페이지에 그래픽적인 요소를 추가하고 그릴 수 있는 그래픽 태그이기도 하다.

그래픽은 칙칙한 텍스트보다 좀 더 동적이고 호기심을 불러일으키는 장치이기도 하다.

그래픽 사용을 위해 html canvas 태그를 사용하기 위해 학습할 내용은 canvas 태그와 함께 canvas API 를 함께 학습해야 한다.

canvas 태그와 API

canvas 태그는 html 에 그래픽을 그리기 위한 영역을 뜻한다.

canvas 태그로 지정된 영역에는 점, 선, 면 또는 움직이는 게임 등 여러가지를 표현할 수 있는데 이런 표현을 위해 사용되는 것이 canvas API 이다.

이 2가지를 사용하여 동적이고 수려한 그래픽을 웹페이지에 표현할 수 있다.

아래는 canvas 태그와 canvas api 를 사용하기 위한 준비 작업을 보여준다.

<style>
    #canvasTutorial {
        border: 1px solid black;
        width: 640px;
        height: 480px;
    }
</style>
<canvas id="canvasTutorial"></canvas>
<script>
	var gCanvas = document.getElementById("canvasTutorial");
	var gContext = gCanvas.getContext("2d");
</script>

샘플코드

아래 코드는 html에서 그래픽을 사용할 준비과정을 보여준다.

canvas 를 이용해 그래픽적 요소를 표시하려는 다른 코드들을 보면 거의 자바스크립트 라이브러리를 사용하지 않은 순수한 형태인 pure javascript 또는 vanilla script 를 사용하는 것을 알 수 있다.

참고로 pure javascript 나 vanilla script 는 자바스크립트 라이브러리를 사용하지 않은 자바스크립트 그 자체를 말한다.

코드를 보자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>canvas 연습</title>
        <style></style>
    </head>
    <body>
        <div id="top">
            <h1>html canvas turorial</h1>
            <p>
                html canvas 태그를 사용하여 웹페이지에 canvas 영역을 표시한 후
                자바스크립트에서 그래픽을 표시할 canvas 를 선택한다.
            </p>
        </div>
        <div>
            <div>
                <style>
                    #canvasTutorial {
                        border: 1px solid black;
                        width: 640px;
                        height: 480px;
                    }
                </style>
                <canvas id="canvasTutorial"></canvas>
                <script>
                    var gCanvas = document.getElementById("canvasTutorial");
                    var gContext = gCanvas.getContext("2d");
                </script>
            </div>
        </div>
    </body>
</html>

화면에 canvas 영역을 표시하기 위해 canvas 태그를 사용하였다.

canvas 태그에 그래픽 요소를 표현하기 위해 자바스크립트에서 canvas 태그를 지정해 주었다.

결과 화면을 보자.

'programming > Graphics' 카테고리의 다른 글

html5 canvas 직사각형 종류와 표현 (0)	2022.06.30
html5 canvas 직사각형 좌표의 이해 기준 좌측상단 (0)	2022.06.26
알고두 온라인 저장소 공유된 프로젝트 불러오기 Load shared algodoo project (0)	2022.02.04
알고두 프로젝트 불러오기 Load algodoo project (0)	2022.02.03
알고두 프로젝트 저장하기 save algodoo project (0)	2022.02.02