-
초보자를 위한 캔버스(Canvas)로 그림 그리기 방법Study/JavaScript 2023. 2. 7. 18:14반응형
캔버스(canvas)는 간단하게 소개하자면 웹에 도형을 표시하고싶거나 그림등...그래픽적인 기능이 필요할때 사용 하는 태그로 html5가 나오면서 같이 나온 기술이라고 한다.
프로젝트를 진행중 웹상에 그림을 그려야 되는 일이 있어 canvas기술을 익히는중 정리겸 올려본다.
1.html 부분
<body> <canvas id="jsCanvas" class="canvasBox" width="500px" height="500px"></canvas> </body>html코드에서는 canvas 태그를 설정하고 id는 자바스크립트 사용을 위해 지정 하고, class는 css적용을 위하여 지정한다.
width와 height는 canvas의 사이즈를 지정 할 수 있는데, css에서도 지정 할수 있으나 렌더링 과정에서 css크기에 맞추기 위해 이미지의 크기를 조절하므로 최종 그래픽이 변형 될 수 있다.
그래서 html 코드에 직접 width와 height를 설정 하였다.
2.css 부분
body{ background-color: aquamarine; } .canvasBox{ background-color: #fff; border: 1px solid #000; }css부분은 특이사항은 없음...
3.JavaScript 부분
var canvas = document.getElementById("jsCanvas"); var ctx = canvas.getContext("2d"); let painting = false; function stopPainting(){ painting=false; } function startPainting(){ painting=true; } function onMouseMove(event){ var x1 = event.offsetX; var y1 = event.offsetY; if(!painting){ ctx.beginPath(); ctx.moveTo(x1,y1); }else{ ctx.lineTo(x1,y1); ctx.stroke(); } } if(canvas){ canvas.addEventListener("mousemove",onMouseMove);//마우스가 움직일때 onMouseMove 메서드가 작동해라 canvas.addEventListener("mousedown",startPainting);//마우스를 눌렀을때 startPainting 메서드가 동작해라 canvas.addEventListener("mouseup",stopPainting);//마우스를 떼었을때 stopPainting 메서드가 동작해라 canvas.addEventListener("mouseleave",stopPainting);//마우스가 벗어났을때 stopPainting 메서드가 동작해라 } }참고로, 자바스크립트 부분 선언 위치는 body태그 아래에 선언해야 한다. 만약 위에 자바스크립트 코드를 선언하면
아래와 같은 에러가 발생하는데....
Uncaught TypeError: Cannot read properties of null (reading 'getContext')
내 추측으로는 아마 canvas는 api 라고 하는데 아마 먼저 태그로써 선언을 해줘야 먼저읽고 canvas api를 쓸수 있게끔 브라우져에서 준비를 시켜주지 않나 싶다.
*자바스크립트 상세 코드 분석
var canvas = document.getElementById("jsCanvas"); var ctx = canvas.getContext("2d");cavas에 id로 선언한 부분을 getElementById 메서드를 이용하여 해당태그의 요소를 가져와 canvas라는 변수에 담아주고
canvas의 getContext("2d") 메서드를 이용하면 CanvasRenderingContext2D 타입의 객체가 반환되는 이 객체를 통하여 그리기 관련 메서드와 속성을 사용 할수 있게된다.
이 객체를 변수 ctx에 담아 앞으로 ctx변수를 통해 그림그리기 메서드를 사용 할 것이다.
let painting = false; function stopPainting(){ painting=false; } function startPainting(){ painting=true; }실제 그림을 그린다고 생각 하자 바로 캔버스위에 붓으로 그리기도 하지만그리지는 않고 붓을 왔다갔다 들고 어디다가 그릴지 고민하는 순간도 있을것이다.이런한 부분을 코딩에서는 painting 변수를 선언하고 값을 ture/false로 구분하여 그리기 시작할때는 true 안그릴때는 false로 값을 주어 구분한다.
function onMouseMove(event){ var x1 = event.offsetX; var y1 = event.offsetY; if(!painting){ ctx.beginPath(); ctx.moveTo(x1,y1); }else{ ctx.lineTo(x1,y1); ctx.stroke(); } }실제 그리기를 담당하는 부분은 onMouseMove에서 담당하고있다.그렇다면 그릴때 컴터가 알수있는 방법이 있을까? 바로 점의 위치를 알면 된다.즉, 선은 무수한 점의 연결이고 점은 위치로 알수 있다. 점점마다의 위치, 즉 좌표를 알면 그림을 그릴 수 있다.canvas에는 여러가지 좌표가 있지만 일단 offsetX,offsetY 좌표만 알면된다. 이 좌표는 이벤트를 걸어놓은 div기준으로 마우스의 좌표를 알아낸다.
if구문으로 painting을 하지 않을때는
beginPath() 함수를 사용하여 경로를 시작하거나 현재경로를 재설정하고,
moveTo()함수를 사용하여 선이 시작될 좌표를 설정하여 그림그리기 준비를 하고 있다가
그림을 그리기 시작하면 lineTo()함수가 선이 끝나는 좌표를 설정하면
stroke()함수가 선을 그린다.
즉, 그림을 그리고 싶으면 beginPath()->moveTo()->lineTo()->stroke() 순서로 그려야 한다.
if(canvas){ canvas.addEventListener("mousemove",onMouseMove);//마우스가 움직일때 onMouseMove 메서드가 작동해라 canvas.addEventListener("mousedown",startPainting);//마우스를 눌렀을때 startPainting 메서드가 동작해라 canvas.addEventListener("mouseup",stopPainting);//마우스를 떼었을때 stopPainting 메서드가 동작해라 canvas.addEventListener("mouseleave",stopPainting);//마우스가 벗어났을때 stopPainting 메서드가 동작해라 }마우스이벤트가 발생시 설정해 놓은 함수를 작동시켜라의 의미정도 될거 같다.
4.결과
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 화살표로 메뉴펼치기 구현(화살표 모양 토글 구현) (0) 2023.03.02 초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기) (0) 2023.02.12 초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기) (1) 2023.01.18 초보자를 위한 반응형 기초(화면크기별로 width설정 하기) (0) 2023.01.07 자바스크립트로 탭 구현하기(신입버젼) (0) 2023.01.06