본문 바로가기
개발(Development)/HTML Canvas(캔버스)

HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드

by 카레유 2021. 6. 1.

# HTML Canvas 선 그리기 방법

1. 새로운 선 그리기 설정:  ctx.beginPath() 

 

2. 선의 출발점 지정 :  ctx.moveTo(x, y) 

 

3. 선의 도착점 지정 :  ctx.lineTo(x, y) 

 

4. 선 그리기 :  ctx.stoke() 

    

* 여러개의 선을 그릴 때는 매번 beginPath() 호출 필요

* beginPath()를 호출하지 않으면, 도착점들을 계속 잇는 선이 그려진다.

# 선 디자인 설정 방법

1. 선 디자인 설정

  1) 색상 설정:  ctx.strokeStyle = '색상'; 

  2) 두께 설정:  ctx.lineWidth = 숫자; 

     * 선 색상/두께는 그리기(ctx.stoke()) 전에 설정

 

2. 선 끝부분 설정:  ctx.lineCap = "butt/square/round" 

   1) butt: 좌표에서 선 끝남(디폴트)

   2) square: 선의 두께만큼 길이를 늘려서 마무리

   3) round: 선의 끝을 둥글게 마무리(선 두께가 반지름)

 

3. 선 꺾인부분 처리:  ctx.lineJoin = 'miter/round/bevel' 

   1) mitter: 각진 모서리(디폴트)

   2) round: 둥근 모서리

   3) bevel: 끝이 잘린 모서리

 

4. 점선 설정:  ctx.setLineDash([1번째 간격, 2번째 간격, ...]) 

 

5. 선 내부 색 채우기

   1) 색상 설정:  ctx.fillStyle = '색상'; 

   2) 색 채우기:  ctx.fill(); 

      * 선 내부 색 채우기는 선 그리기(ctx.stroke()) 이후 설정

샘플 예제 코드 1:  선 그리기 

출발점과 도착점을 잇는 선을 그리는 샘플 예제 코드

 

# 선 그리기

1. 새로운 선 그리기 설정:  ctx.beginPath() 

2. 선의 출발점 지정 :  ctx.moveTo(x, y) 

3. 선의 도착점 지정 :  ctx.lineTo(x, y) 

4. 선 그리기 :  ctx.stoke() 

<!DOCTYPE html>
<html lang="en">
<head>
    <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. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(0, 0);

        // 5. 도착점 지정
        ctx.lineTo(400, 300);

        // 6. 선 그리기
        ctx.stroke();


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

<결과물>

샘플 예제 코드 2: 여러개의 '이어진' 선 그리기

4개의 선을 이어그려서 사각형을 만든다.

ctx.beginPath()를 호출하지 않으면, 직전 도착점에서 이어지는 선이 그려진다.

<!DOCTYPE html>
<html lang="en">
<head>
</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. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(50, 50);

        // 5-1). 첫번째 도착점 지정
        ctx.lineTo(300, 50);
        
        // 5-2). 2번째 도착점 지정
        ctx.lineTo(300, 200);

        // 5-3). 3번째 도착점 지정
        ctx.lineTo(50, 200);

        // 5-4). 4번째 도착점 지정
        ctx.lineTo(50, 50);

        // 6. 선 그리기
        ctx.stroke();

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

<결과물>

샘플 예제 코드 3:  선 두께/색상 설정

두께 20의 핑크색 선으로 사각형을 그린다.

선의 색상/두께는 ctx.stoke() 호출 전에 설정해야하는 것을 주의하자.

 

# 선 디자인 설정

1) 색상 설정:  ctx.strokeStyle = '색상'; 

2) 두께 설정:  ctx.lineWidth = 숫자; 

 

<!DOCTYPE html>
<html lang="en">
<head>
</head>

 <body>

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

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

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

        // 3. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(50, 50);

        // 5-1). 첫번째 도착점 지정
        ctx.lineTo(300, 50);
        
        // 5-2). 2번째 도착점 지정
        ctx.lineTo(300, 200);

        // 5-3). 3번째 도착점 지정
        ctx.lineTo(50, 200);

        // 5-4). 4번째 도착점 지정
        ctx.lineTo(50, 50);

        // 6. 선 두께/색상 설정
        ctx.lineWidth = 20;
        ctx.strokeStyle = 'pink';

        // 7. 선 그리기
        ctx.stroke();

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

<결과물>

샘플 예제 코드 4: 선 끝부분 설정

위의 결과물에서 마지막 선부분이 비어있는데,

마지막 ctx.lineTo(도착점)에서 설정한 좌표에서 선이 끝나기 때문이다.

(따라서 첫번째 선 두께의 절반만큼이 비어 보이게 된다)

ctx.lineCap = 'square' 로 설정해주면, 선 끝부분이 두께만큼 늘어나서 자연스럽게 보인다.

 

# 선 끝부분 설정

 ctx.lineCap = "butt/square/round" 

1) butt: 좌표에서 선 끝남(디폴트)

2) square: 선의 두께만큼 길이를 늘려서 마무리

3) round: 선의 끝을 둥글게 마무리(선 두께가 반지름)

<!DOCTYPE html>
<html lang="en">
<head>
</head>

 <body>

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

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

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

        // 3. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(50, 50);

        // 5-1). 첫번째 도착점 지정
        ctx.lineTo(300, 50);
        
        // 5-2). 2번째 도착점 지정
        ctx.lineTo(300, 200);

        // 5-3). 3번째 도착점 지정
        ctx.lineTo(50, 200);

        // 5-4). 4번째 도착점 지정
        ctx.lineTo(50, 50);

        // 6. 선 두께/색상 설정
        ctx.lineWidth = 20;
        ctx.strokeStyle = 'pink';

        // 7. 선 끝부분 처리
        ctx.lineCap = "square" // square, butt, round

        // 8. 선 그리기
        ctx.stroke();


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

<결과물>

샘플 예제 코드 5: 선 내부에 색 채우기

선으로 그린 사각형 내부를 원하는 색으로 채울 수 있다.

ctx.stroke()로 선을 그린 다음에, 색을 채워야 함에 주의하자.

 

# 선 내부 색 채우기

1) 색상 설정:  ctx.fillStyle = '색상'; 

2) 색 채우기:  ctx.fill(); 

<!DOCTYPE html>
<html lang="en">
<head>
</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. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(50, 50);

        // 5-1). 첫번째 도착점 지정
        ctx.lineTo(300, 50);
        
        // 5-2). 2번째 도착점 지정
        ctx.lineTo(300, 200);

        // 5-3). 3번째 도착점 지정
        ctx.lineTo(50, 200);

        // 5-4). 4번째 도착점 지정
        ctx.lineTo(50, 50);

        // 6. 선 두께/색상 설정
        ctx.lineWidth = 20;
        ctx.strokeStyle = 'pink';

        // 7. 선 끝부분 처리
        ctx.lineCap = "square" // square, butt, round

        // 8. 선 그리기
        ctx.stroke();

        // 9. 선 내부에 색 채우기
        ctx.fillStyle = 'blue';
        ctx.fill();

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

<결과물>

샘플 예제 코드 6: 선 꺽이는 부분 처리

사각형 테두리의 모서리 부분을 둥글게 처리할 수 있다.

 

# 선 꺾인부분 처리

 ctx.lineJoin = 'miter/round/bevel' 

1) mitter: 각진 모서리(디폴트)

2) round: 둥근 모서리

3) bevel: 끝이 잘린 모서리

<!DOCTYPE html>
<html lang="en">
<head>

</head>

 <body>

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

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

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

        // 3. 새선 그리기 설정
        ctx.beginPath();

        // 4. 출발점 지정
        ctx.moveTo(50, 50);

        // 5-1). 첫번째 도착점 지정
        ctx.lineTo(300, 50);
        
        // 5-2). 2번째 도착점 지정
        ctx.lineTo(300, 200);

        // 5-3). 3번째 도착점 지정
        ctx.lineTo(50, 200);

        // 5-4). 4번째 도착점 지정
        ctx.lineTo(50, 50);

        // 6. 선 두께/색상 설정
        ctx.lineWidth = 20;
        ctx.strokeStyle = 'pink';

        // 7. 선 끝부분 처리
        ctx.lineCap = "round" // butt, square, round

        // 8. 선 꺾인부분 처리
        ctx.lineJoin = 'round'; // mitter, round, bevel

        // 8. 선 그리기
        ctx.stroke();

        // 9. 선 내부에 색 채우기
        ctx.fillStyle = 'blue';
        ctx.fill();

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

<결과물>

샘플 예제 코드 7: 점선 그리기

점선의 간격을 설정하여 점선을 그릴 수 있다.

별도의 선을 그릴 땐, 매번 ctx.beginPath()를 호출해주어야 함을 주의하자.

# 점선 그리기

 ctx.setLineDash([1번째 간격, 2번째 간격, ...]) 

<!DOCTYPE html>
<html lang="en">
<head>

</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. 새선 그리기 + 점선 설정
        ctx.beginPath();
        ctx.moveTo(10, 10);
        ctx.lineTo(300, 10);
        ctx.lineWidth = 10;
        ctx.setLineDash([20]); // 간격이 20인 점선 설정
        ctx.stroke();

        // 4. 별도선 그리기 + 점선 설정
        ctx.beginPath();
        ctx.moveTo(10, 50);
        ctx.lineTo(300, 50);
        ctx.setLineDash([20, 10]); // 간격이 20, 10인 점선 설정
        ctx.stroke();

        // 5. 별도선 그리기 + 점선 설정
        ctx.beginPath();
        ctx.moveTo(10, 100);
        ctx.lineTo(300, 100);
        ctx.setLineDash([20, 10, 40, 10]); // 간격이 20, 10, 40, 10인 점선 설정
        ctx.stroke();

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

<결과물>

HTML Canvas 엘리먼트에서

다양한 모양의 선을 그리는 방법을 정리해보았다.

 

선 그리는 방법에 대한 기초는 이것으로 마무리한다.

 

캔버스 자체에 대한 기초 내용은 아래 글 참고

HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드

 

 

저작자표시 변경금지

'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글

HTML Canvas(캔버스): 이미지 그리기 방법 drawImage  (0) 2021.06.04
HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법  (0) 2021.06.03
HTML Canvas(캔버스): 원 circle 그리기 방법  (0) 2021.06.03
HTML Canvas(캔버스): 사각형 그리기 방법  (0) 2021.06.03
HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드  (0) 2021.06.01

관련글

댓글

티스토리툴바