html5 canvas 직사각형 종류와 표현

html의 canvas에 직사각형을 표현하는 방법은 3가지가 있다. 배경색이 있는 직사각형을 그릴 수 있고, 테두리만 있는 직사각형을 그릴 수 있다. canvas 의 구역 중 일부를 직사각형으로 지정하여 삭제할 수 있다. 추가로 직사각형의 좌표는 직사각형의 좌측상단을 기준으로 한다.

html5 canvas 직사각형 종류와 표현

html의 canvas 에 직사각형을 표현하는 방법은 3가지가 있다.

canvas에 그려지는 직사각형에 배경색을 지정하거나 테두리만 표시할 수 있다.

그리고, 직사각형으로 범위를 지정하여 해당 범위만 삭제할 수 있다.

직사각형을 그리기 위해 좌표계를 이해할 필요가 있다. 이부분은 이전에 작성한 내용을 참고한다.

html5 canvas 직사각형 좌표의 이해 기준 좌측상단

canvas 직사각형 종류

canvas에 직사각형을 표현하는 방법은 3가지가 있으며, 사용하는 메서드도 3가지 정도이다.

배경색을 지정할 수도 있고, 테두리만 지정할 수도 있다.

직사각형으로 범위를 지정하여 canvas 의 특정 범위를 삭제할 수도 있다.

아래는 직사각형을 표현하는 canvas api 메서드를 나타낸다.

fillRect( x , y , width , height )
fillStyle = 배경색
strokeRect( x , y , width , height )
clearRect( x , y , width , height )

샘플코드

canvas에 직사각형을 표현하는 방법에 대한 html5 예제를 만들어 본다.

canvas에 직사각형을 그리기 위한 방법은 3가지이고, 배경색을 지정하거나 테두리만 표현하거나 또는 배경색과 테두리를 중복시킬 수 있고, canvas의 영역 중 일부를 직사각형으로 범위를 지정해 삭제할 수도 있다.

코드를 보자.

코드 길이는 길지만 중간에 있는 자바스크립트 부분의 canvas api 만 보면 된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>canvas 연습</title>
        <style>
            p {
                width: 640px;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <h1>html canvas turorial</h1>
            <p>
                html canvas 태그를 사용하고 직사각형을 그려본다.
                <ol>
                    <li>fillRect( x좌표, y좌표, 너비, 높이 )</li>
                    <li>strokeRect( x좌표, y좌표, 너비, 높이 )</li>
                    <li>clearRect( x좌표, y좌표, 너비, 높이 )</li>
                    <li>fillStyle = 배경색 </li>
                </ol>
            </p>
        </div>
        <div>
            <div>
                <style>
                    #canvasTutorial {
                        border: 1px solid black;
                    }
                </style>
                <canvas id="canvasTutorial" width="640" height="480"></canvas>
                <script>

                    var gCanvas = document.getElementById("canvasTutorial");
                    var gContext = gCanvas.getContext("2d");

                    // 배경색이 있는 직사각형
                    gContext.fillStyle = "#FF0000";
                    gContext.fillRect( 100, 100, 150, 150);

                    // 테두리만 있는 직사각형
                    gContext.strokeRect( 250, 250, 150, 150);

                    // 직사각형 형태로 범위 삭제
                    gContext.clearRect( 200, 200, 150, 150);

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

직사각형을 위한 canvas api 를 4가지 사용하고 있다.

fillRect 는 배경색이 있는 직사각형을 그리며 fillStyle 과 함께 사용하여 배경색을 지정한다.

strokeRect 는 직사각형의 테두리를 그린다.

clearRect 는 canvas 의 영역 중 직사각형으로 특정 범위를 지정해 삭제할 수 있다.

결과 화면을 보자.

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

html5 canvas 직사각형 좌표의 이해 기준 좌측상단 (0)	2022.06.26
html5 canvas 태그 웹브라우저에 그래픽을 표현하기 (0)	2022.06.24
알고두 온라인 저장소 공유된 프로젝트 불러오기 Load shared algodoo project (0)	2022.02.04
알고두 프로젝트 불러오기 Load algodoo project (0)	2022.02.03
알고두 프로젝트 저장하기 save algodoo project (0)	2022.02.02