코딩/1-JavaScript

_02_grid , _03_rect , _04_arc , _05_text

tree0505 2025. 6. 11. 10:47
반응형
  • _02_grid
  • 그리드 

  • html이 대단한 언어이다.
  • 테이블 <table> 그냥 그려줌 
  • 사실상 html은 내부에 엄청난 코딩이 들어있다.  
  • <table> 그리드를 다 그려주는것 
  • 안에가 그리드 처럼 되어 있다. 
  • grid.html
  • <!DOCTYPE html>
    <html lang="ko">
    <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>
       
    </head>
    <body>
        <canvas id="myCanvas" width="650" height="650" style="border: 1px solid black;"></canvas>
       <script src="grid.js"></script>
    </body>
    </html>

    <!--
        참고사이트
    -->
  • grid.js
  • /*
        오목판(그리드) 만들기(10 * 10)
    */

    function drawGrid(){
        ctx.beginPath();
       
        let originX = 100;  // 시작위치
        let originY = 100;  // 시작위치
        let lineGap = 50;   // 그리드 간격
        let lineCount = 10; // 선 개수 조절

        // 세로 그리기
        for(let i = 0; i < lineCount; i++){
            let startX = originX + lineGap * i;
            let startY = originY;
            let endX = startX;
            let endY = lineGap * (lineCount - 1) + originY;
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();        
        }

        // 가로 그리기
        for(let i = 0; i < lineCount;  i++){
            let startY = originY + lineGap * i;
            let startX = originX;
            let endY = startY;
            let endX = lineGap * (lineCount - 1) + originX;
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();        
        }
       
        ctx.closePath();
    }

    //-------------------------------------------------
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    drawGrid();

_03_rect

  • rect.html
  • <!DOCTYPE html>
    <html lang="ko">
    <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>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
        </canvas>
        <script src="rect.js"></script>
    </body>
    </html>
  • rect.js
  • function drawRect(){
        /*
            네모그리기
            ctx.rect(시작x , 시작y , 가로크기 , 세로크기)
           
            색상 저장
            ctx.fillStyle = "컬러"

            색상채워넣기
            ctx.fill();      
        */
       
        ctx.beginPath();

        ctx.rect(30, 30, 70, 50);
        //rect라는 함수가 제공이 된다.
        //(30, 30, 70, 50); // x , y, x사이즈 , y사이즈

        ctx.stroke();

        ctx.closePath();

        //----------------------------------

        ctx.beginPath();

        ctx.rect(200, 200, 100, 100);
        ctx.fillStyle = "blue";
        ctx.fill(); //채우다.

        ctx.closePath();
    }

    //-------------------------------------------------
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    drawRect();

_04_arc

  • arc.html
  • <!DOCTYPE html>
    <html lang="ko">
    <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>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
        </canvas>
        <script src="arc.js"></script>
    </body>
    </html>

 

  • arc.js
  • function drawArc(){

        /*
            ctx.arc(x, y, 반지름, 시작각도, 마지막각도)
        */
        console.log(Math.PI);
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2*Math.PI); //Math.PI => 반지름
        //100. 100. 의 위치에 . 반지름은 50으로 . 시작은 0도에서 . 2*3.14
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(300, 300, 30, 0 , Math.PI);
        ctx.fillStyle="red"
        ctx.fill();
        ctx.closePath();
    }

    //-------------------------------------------------
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    drawArc();

_05_text

  • text.html
  • <!DOCTYPE html>
    <html lang="ko">
    <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>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
        </canvas>
        <script src="text.js"></script>
    </body>
    </html>

    <!--
    -->
  • text.js
  • function drawText(){

        ctx.font = '48px serif';  //serif=> 내장되어 있는 폰트
        ctx.fillStyle = "blue";                     // 텍스트 색상
        ctx.fillText('Hello world', 10, 50);        // 외곽선X
        // 10, 50 => 위치. x y

        ctx.font = '48px serif';
        ctx.strokeText('Hello world', 10, 150);     // 외곽선O
        //strokeText => 외각선으로 그려라.

        ctx.font ="40px Fira";
        ctx.strokeText('Hello world', 10, 250); //외각선으로 그리고
        ctx.fillStyle = "rgb(250, 100, 100)";       // 텍스트 내부에 색칠
        ctx.fillText('Hello world', 10, 250);
    }

    //-------------------------------------------------
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    drawText();

getElementById와 querySelector는 HTML 요소를 선택할 때 사용하는 대표적인 두 가지 방식입니다. 둘 다 자주 사용되지만 기능과 사용 방식에 약간 차이가 있습니다.

✅ 1. getElementById("id")

  • 특정 ID를 가진 요소를 가져옵니다.
  • 항상 하나의 요소만 반환합니다.
  • 빠르고 간단합니다.
javascript
복사편집
let canvas = document.getElementById("myCanvas");

위 코드는 <canvas id="myCanvas"></canvas>인 요소 하나만 정확히 가져옵니다.

✅ 특징

  • ID는 문서 내에서 고유해야 하므로, 결과는 무조건 하나입니다.
  • 빠른 성능: 내부적으로 최적화되어 있어서 더 빠릅니다.

✅ 2. querySelector("CSS선택자")

  • CSS 선택자를 사용해서 요소를 선택합니다.
  • 조건에 처음으로 일치하는 요소 하나만 반환합니다.
  • ID, 클래스, 태그, 복합 선택자 등 다양하게 사용 가능.
javascript
복사편집
let canvas = document.querySelector("#myCanvas"); // ID 선택자 let title = document.querySelector(".title"); // 클래스 선택자 let link = document.querySelector("a[href^='http']"); // 속성 선택자

✅ 특징

  • 훨씬 더 유연합니다 (CSS 선택자를 모두 쓸 수 있어서).
  • 다만 약간 더 느릴 수 있습니다 (대부분의 경우 체감 안 됨).

🔁 비교 요약

항목getElementById()querySelector()
선택 방식 ID 전용 CSS 선택자 전체 사용 가능
반환 값 단 하나 (ID는 고유해야 함) 처음 매칭된 하나만 반환
사용 예 getElementById("myId") querySelector("#myId")
속도 더 빠름 약간 느릴 수 있음
사용 가능성 제한적 매우 다양함 (태그, 클래스 등 포함)
 

💡 언제 어떤 걸 써야 하나?

  • ID만 정확히 알고 있을 때 → getElementById
  • 좀 더 복잡한 조건으로 선택 (예: 클래스, 속성 조합 등) → querySelector

🔚 예시 비교

html
복사편집
<canvas id="myCanvas" class="game-area"></canvas>
javascript
복사편집
// 둘 다 같은 요소 선택 let c1 = document.getElementById("myCanvas"); let c2 = document.querySelector("#myCanvas");

 

  • canvas: 그림을 그릴 도화지
  • getContext("2d"): 붓이나 펜 같은 도구를 꺼내는 것
  • ctx: 실제로 그림을 그릴 때 쓰는 붓을 들고 있는 손

 

 

반응형

'코딩 > 1-JavaScript' 카테고리의 다른 글

_04_포인트인렉트  (0) 2025.06.11
_01_캔버스클릭원그리기 , _02_캔버스클릭원지우고원그리기 , _03_FPS셋팅  (1) 2025.06.11
01_캔버스요소 => _00_canvas , _01_line  (0) 2025.06.11
02_테트리스  (1) 2025.06.10
01_스네이크 ( 1 ~ 3 )  (1) 2025.06.10

'코딩/1-JavaScript'의 다른글

  • 현재글_02_grid , _03_rect , _04_arc , _05_text

관련글

티스토리툴바