이번 실습은 javascript의 canvas를 이용한 그림판 제작이다.
설정된 조건은 다음과 같다.
1. 캔버스 크기는 480 x 320 으로 지정한다.
2. 5가지 색상을 선택 가능하게 한다.
3. 색상 글자 클릭 시에도 컬러 선택이 가능하게 한다.
4. 펜 굵기를 선택할 수 있도록 하며 범위는 1~30으로 한다.
5. 선 스타일을 지정한다.
6. [캔버스 초기화]버튼을 만들어 클릭 시 캔버스를 초기화한다.
7. [캔버스 저장]버튼을 누르면 캔버스를 이미지로 변환하여 아래쪽에 보여주고, 크기는 120 x 80으로 한다.
우선 1번 조건의 '캔버스 크기는 480 x 320으로 지정하기'를 만족시키기 위해 크기를 지정한 캔버스를 만들어준다.
<body>요소에 3개의 이벤트들이 지정되어있는데 다음과 같다.
> onmousedown : 마우스 버튼을 누를 때 발생하는 이벤트
> onmousemove : 마우스 커서를 움직이는 동안 반복해서 이벤트 발생
> onmouseup : 마우스 버튼을 땔 때 발생하는 이벤트
위에서는 각 이벤트가 실행될 때 순서대로 start, draw, stop 함수를 실행되게끔 하였는데
이는 마우스로 그림판에 그림을 그리기 위해 지정한 코드들로 자세한 설명은
javascript 코드를 보며 진행할 것이다.
다음은 이어지는 javascript 코드이다.
위에서 설정한 canvas 객체를 가져오는 변수를 만들고
myContext 변수에 getContext("2d")를 사용하여 그림을 그리기 위한 객체를 생성하였다.
위에서 설명한 3개의 함수 부분의 코드를 먼저 살펴 볼 예정인데,
canvas에 마우스로 그림을 그리기 위해 작성한 것이다.
1. start() 함수
> 우선 start 함수는 마우스를 눌렀을 경우 실행된다.
'e = window.event' 는 마우스의 커서를 나타내는 것으로
이어지는 코드는 마우스 커서의 위치의 좌표를 나타낸다.
'drawing = true'는 그림을 그리기 시작할 때 ( pen down)의 값을 설정한 것이다.
drawing이 true인 경우는 그림 그리기를 진행하는 경우이므로 draw 함수를 실행하며,
drawing이 false인 경우는 그림 그리기를 중단한 상태이므로 dtop 함수를 실행한다.
2. draw() 함수
> 마우스를 누르고 그림을 그리는 동안 실행될 함수이므로 if문을 사용하여 drawing이 항상 참인 경우 실행되도록 한다.
역시 마우스 커서와 좌표를 설정하고,
5번 조건인 '선 스타일 지정하기'를 나타내기 위해
lineJoin과 lineCap을 'round'로 설정하였다.
> lineJoin : 선이 꺾이는 부분의 스타일을 지정한다.
> lineCap : 선 끝 부분의 스타일을 지정한다.
그리고 stroke()를 설정해 주어 그림이 그려지도록 하였다.
3. stop() 함수
> 마우스를 땠을 경우 즉, 그림 그리기를 중단했을 경우 실행되는 함수로,
drawing을 false로 바꿔 실행을 중단한다.
다음은 이어지는 javascript 코드이다.
각 함수를 살펴보자면 다음과 같다.
1. color() 함수
> 2번 조건인 '5가지 색상을 선택하기'를 표현하기 위해 만든 함수이다.
매개변수인 'color'는 밑의 html의 라디오버튼 name 값으로 선택된 색을 가져와 선 색을 지정한다.
> strokeStyle : 선의 색상을 지정한다.
2. range() 함수
> 4번 조건인 '펜 굵기를 설정하기'를 만족시키기 위해 설정한 함수이다.
html로 구현한 range form의 id를 받아 펜의 굵기를 조절하였다.
>lineWidth : 선의 굵기를 지정한다.
3. reset() 함수
> 6번 조건인 '[캔버스 초기화] 버튼을 만들어 클릭시 캔버스 초기화하기'를 만족시키기 위해 설정한 함수이다.
>clearRect : 사각형 내에서 픽셀의 빈 세트를 지정하며 (x, y, 폭, 높이)를 매개 변수로 입력한다.
4. imgdata() 함수
> 7번 조건인 '[캔버스 저장] 버튼을 만들어 캔버스 이미지를 저장하여 밑에 보여주기'를 만족시키기 위해 설정한 함수이다.
toDataURL() 메소드를 이용하여 캔버스를 png 형태의 데이터로 변환한 후 html로 작성한 이미지 아이디인
데이터 url을 "canvaseImage" 엘리먼트의 src 속성으로 지정하였다.
이후 이미지를 그리기 위해 새로운 이미지 객체를 생성하여 로드된 후 밑에 이미지를 표현하도록 하였다.
> onload : 문서나 프레임 객체등이 웹 브라우저 상에 로드가 완료되었을 때 발생하는 이벤트이다.
> drawImage : 캔버스 컨텍스트에서 이미지를 그리는 메소드이다. (본문에서 사용한 매개변수는 코드 수정 중 작성된 것으로 후에 삭제하였다.)
다음은 html 부분이다.
form의 radio 버튼을 이용하여 펜 컬러를 선택할 수 있게 하였으며, 선택된 각 부분에 대해 onclick을 사용하여, color() 함수가 실행되도록 하였다. 그리고 3번 조건의 '색상 이름을 클릭해도 컬러 선택이 가능하게 하기'를 만족시키기 위해
각 버튼에 대해서 label을 설정하였다.
다음은 form의 range를 이용하여 펜의 굵기를 설정하기 위한 부분이다.
min과 max 속성을 사용하여 굵기의 범위를 설정하였다. (1~30)
폼 요소의 컨텐츠 내용이 변경되었을 때 적용되는 이벤트 onchange를 등록하여 선택된 value 값을 range함수에 전달되도록 하였다.
마지막으로
[캔버스 초기화], [캔버스 저장]버튼과 캔버스를 저장하여 이미지로 나타내기 위해 나타낸 부분이다.
[캔버스 초기화]의 경우 reset 타입을 이용하였고, onclick을 이용하여 클릭 시 reset 함수가 작동되도록 하였다.
[캔버스 저장]의 경우 button 타입을 이용하였고, 마찬가지로 onclick과 onmousedown을 이용하여 클릭 시 imgdata 함수가 작동되도록 하였다.
img의 경우 7번 조건의 '저장된 이미지를 120 x 80으로 나타내기'를 만족하기 위해 각각 폭과 넓이를 설정해주었다.
실제 작동 화면은 다음과 같다.
* 본 포스팅은 개인용으로 작성한 것이므로 불법, 무단 복제나 펌을 금지합니다.
'컴퓨터 > HTML,CSS,JS,JQUERY' 카테고리의 다른 글
| javascript 이벤트 정리 (0) | 2021.07.05 |
|---|---|
| [내가 보려고 만든] javascript 문법 정리 (0) | 2021.07.05 |
| html,Javascript를 이용한 실습 - toggle 문서 제작 (0) | 2021.07.05 |
| Html,Java script를 이용한 컬러 테이블 제작하기 (0) | 2021.07.05 |
| html,Js를 이용한 비만도 판정 페이지 만들기(BMI 지수) (0) | 2021.07.05 |
