라라리라

2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차 본문

코딩/2023 JavaScript DOM

2023.10.30~2023.11.01 / Step 8 [DOM_canvas] - 코딩 79~81 일차

헤실 2023. 11. 1. 18:57

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++){ // for(i = 0; i < 10; i++)
        let startX = originX + lineGap * i; //100 + 50 *  i //=> 100 / 150/ 200/ 250......
        let startY = originY; //100;
        let endX = startX; //100 + 50 * i;
        let endY = lineGap * (lineCount - 1) + originY; // 50 * 9 + 100 ==> endY = 550;
        ctx.moveTo(startX, startY); //ctx.moveTo(100 + 50 * i , 100)
        ctx.lineTo(endX, endY);  // ctx.lineTo(100 + 50 * i, 50 * 9 + 100)
        ctx.stroke();        
    } //세로그리기에서 x 값은 변하지않음(startX와 endX는 동일해야함.)
    //세로그리기에서 Y값은

    // 가로 그리기
    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();

 

grid테스트.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"  width="1000px" height="1000px" style="border: 1px solid black;"></canvas>
    <script src="grid테스트.js"></script>
</body>
</html>

 

grid테스트.js

 


function gridtest(){
    let originX = 100;
    let originY = 100;
    let lineCount = 10;
    let linegap = 50;

    ctx.beginPath();
   
    for(let i = 0; i < lineCount; i++){ //세로그리기
        ctx.moveTo(originX + linegap * i, originY);
        ctx.lineTo(originX + linegap * i, originY + (lineCount - 1) * linegap );
        ctx.stroke();
    }
   
    for(let i = 0; i < lineCount; i++){ //가로그리기
        ctx.moveTo(originX, originY + linegap * i);
        ctx.lineTo(originX + (lineCount - 1) * linegap ,originY + linegap * i);
        ctx.stroke();
    }

    for(let i = 1; i < lineCount; i++){ //대각선그리기
        ctx.moveTo(originX + linegap * i , originY)
        ctx.lineTo(originX, originY + linegap * i);
        ctx.stroke();
        ctx.moveTo((originX + (lineCount - 1) * linegap) - i * linegap , originY + (lineCount - 1) * linegap )
        ctx.lineTo((originX + (lineCount - 1) * linegap), originY + (lineCount - 1) * linegap  - i * linegap)
        ctx.stroke();
    }
    for(let i = 1; i < lineCount; i++){ //대각선그리기2
        ctx.moveTo((originX + (lineCount - 1) * linegap) - i * linegap, originY);
        ctx.lineTo(originX + (lineCount - 1) * linegap , originY + linegap * i);
        ctx.stroke();
        ctx.moveTo(originX + linegap * i , originY + (lineCount - 1) * linegap);
        ctx.lineTo(originX, originY + (lineCount - 1) * linegap - i * linegap);
        ctx.stroke();
    }


    ctx.closePath();
}
//======================================================

let myCanvas = document.querySelector(`#myCanvas`);
let ctx = myCanvas.getContext("2d");
gridtest();

 

rect_test.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="600px" height="600px" style="border: 1px solid black;"></canvas>
    <script src="rect_text.js"></script>
</body>
</html>

 

rect_text.js

 

function drawrect(){
    ctx.beginPath();
    ctx.rect(80,80,80,80);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.rect(180,180,100,100);
    ctx.fillStyle = "red";
    ctx.fill();

    ctx.closePath();
}

//=============================
let rect = document.querySelector(`#myCanvas`);
let ctx = rect.getContext("2d");
drawrect();

 

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);
    ctx.stroke();

    ctx.closePath();

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

    ctx.beginPath();

    ctx.rect(200, 200, 100, 100);
    ctx.fillStyle = "red";
    ctx.fill();

    ctx.closePath();
}

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

 

rect과제.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="600px" height="600px" style="border: 1px solid black;"></canvas>
    <script src="rect과제.js"></script>
</body>
</html>

 

rect과제.js

 

function drawrect(){
    let curY = 100;
    let curX = 100;
    let size = 40;
    cnt.beginPath();
    for(let i = 0; i < size * 10; i = i + size){
        for(let j = 0; j < size * 10; j = j + size){
            cnt.rect(curX + j, curY + i, size, size);
            cnt.fillStyle = "red";
            cnt.fill();
            cnt.stroke();
        }
    }
    cnt.closePath();
}
//================]
let rect = document.querySelector(`#myCanvas`);
let cnt = rect.getContext("2d");
drawrect();

 

arc_test.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="700px" height="700px" style="border: 1px solid black;"></canvas>
    <script src="arc_test.js"></script>
</body>
</html>

 

arc_test.js

 

function drawarc(){
    cnt.beginPath();
    cnt.arc(100, 100, 50, 0, Math.PI/2, false);
    cnt.stroke();
    cnt.closePath();
   
    cnt.beginPath();
    cnt.arc(200, 100, 50, 0, Math.PI);
    cnt.stroke();
    cnt.closePath();

    cnt.beginPath();
    cnt.arc(300, 100, 50,  Math.PI/2,  Math.PI,true);
    cnt.stroke();
    cnt.closePath();
   
    cnt.beginPath();
    cnt.arc(400, 100, 50,  0,  2*Math.PI,true);
    cnt.stroke();
    cnt.closePath();

    cnt.beginPath();
    cnt.arc(300,300, 80, 1.5707963268, 2* Math.PI);
    cnt.fillStyle = "lightGreen";
    cnt.fill();
    cnt.stroke();
    cnt.closePath();
}

//====================================================

let arc = document.querySelector(`#myCanvas`);
let cnt = arc.getContext(`2d`);
drawarc();

 

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);
    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();

 

text_test.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="600px" height="600px" style="border: 1px solid black;"></canvas>
    <script src="text_test.js"></script>
</body>
</html>

 

 

text_test.js

 

function drawText(){
    cnt.font = "48px serif"
    cnt.fillStyle = "blue"
    cnt.fillText("Hello World!", 10, 50)

    cnt.font = "48px serif"
    cnt.strokeText("Hello World!", 10, 150)

    cnt.font = "48px pira"
    cnt.fillStyle = "red"
    cnt.fillText("Hellow World!", 10 , 250)
    cnt.strokeText("Hellow World!", 10 , 250)
}
//===========================================================
let testtext = document.querySelector(`#myCanvas`);
let cnt = testtext.getContext(`2d`);
drawText();

 

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';
    ctx.fillStyle = "blue";                     // 텍스트 색상
    ctx.fillText('Hello world', 10, 50);        // 외곽선X    숫자 = x Y 값

    ctx.font = '48px serif';
    ctx.strokeText('Hello world', 10, 150);     // 외곽선O

    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();

 

저작자표시 (새창열림)

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.11.03 / Step 8 [DOM_canvasDrawArc] - 코딩 83 일차  (0) 2023.11.03
2023.11.02 / Step 8 [DOM_canvasMouse] - 코딩 82 일차  (0) 2023.11.02
2023.10.27 / Step 8 [DOM_canvas] - 코딩 78 일차  (0) 2023.10.27
2023.10.26 / Step 7 [DOM_market] - 코딩 77 일차  (0) 2023.10.26
2023.10.25 / Step 7 [DOM_Diary] - 코딩 76 일차  (0) 2023.10.25
'코딩/2023 JavaScript DOM' Related Articles more