[JS] JavaScript로 canvas상에 드래그로 사각형 그리기

<↑한번 그려보세요>

 

안녕하세요. 

 

오늘은 HTML canvas 엘리먼트상에 사각형을 그리는 예제를 공유해볼까합니다.

 

canvas란??

canvas란 웹 상에서 그래픽을 그리기 위한 엘리먼트로 2D, 3D 그래픽을 그릴 때 주로 사용합니다.

사용 예 로는 다음, 카카오, 구글의 지도를 띄울 때 canvas element를 사용하기도하고 그림판 또는 웹상에서 이미지를 편집할 때 주로 사용합니다.

 

 

canvas 상에 사각형 그리기

 

먼저 canvas에서 사각형을 그리기 위해 알아야하는 것들을 정리해보면

 

 

1. <canvas> 엘리먼트 만들기

 

 -  원하는 크기로 html 소스상에 <canvas> 를 생성합니다.

<canvas id = "draw-canavas" width = "300" height = "300" style =' border : 1px solid #000 '; > </canvas>

 

2. 2D 렌더링 컨텍스트 객체 생성

 

<canvas> 엘리먼트 상에 드로잉영역을 생성하고, 출력할 컨텐츠를 다루기 위해서 2D 렌더링 컨텍스트 객체를 만들어 줘야 합니다. (그리는 함수들을 사용하기 위함)

document상의 캔버스 객체에서 getContext("2d") 함수를 사용하여 가져올 수있음  

var canvas = document.getElementById ( "draw-canavas" );
var context = canvas.getContext ( "2d" );

 

3. <canvas> 엘리먼트에서 제공하는 함수 활용

 

canvas상에서 그림판 기능 만들기 위해서 주로 활용하는 4가지 함수가 있습니다.

 - mousedown :  마우스를 누르고 있을 때

 - mouseup : 마우스를 누르고 있다가 떼었을 때 중 손을 떼었을 때

 - mousemove : 마우스가 움직일 때 

 - mouseout : 마우스가 컨버스상에서 벗어났을 때

 

사용 예)

 canvas.addEventListener ( "mousedown" , function (me) {
        mDown (me)}, false );
 canvas.addEventListener ( "mousemove" , function (me) {
        mMove (me)}, false );
 canvas.addEventListener ( "mouseup" , function (me) {
        mUp (me)}, false );
 canvas.addEventListener ( "mouseout" , function (me) {
        mOut (me)}, false );

 

4. 사각형 그리기

 

canvas상에 도형을 그리려면 위 함수들과 그리는 함수를 제공하는 렌더링 컨텍스트 객체(context)를 사용해야한다.

사각형을 그리기 위해서는 strokeRect(startX, stratY,e endX, endY) 함수를 사용한다.

 

context.strokeRect(startX,startY,currentX-startX,currentY-startY)

 

5. 활용예제 

 

위 설명내용을 바탕으로 작성한 예제 코드입니다. 

 

다루지 않은 부분에 대해서는 주석 참고 바랍니다.

 

See the Pen zYZEreJ by Bae KeonHo (@baekh93) on CodePen.