마우스이벤트
-
JavaScript 입문 : Canvas 이론 정리 - 그림판 만들기 (컬러버튼 만들고 색상별 선 그리기)컴퓨터 알아가기/JavaScript 2022. 12. 25. 19:30
지금까지 기본적인 캔버스 이론을 공부하면서 작동이 되는 원리를 중점으로 보았습니다. 도형을 만들고 마우스이벤트를 통하여 원하는 선을 그려 보았습니다. 이러한 원리를 기준으로 '약식 그림판'을 만들어 보도록 하겠습니다. 역시 본 내용은 '1분코딩의 캔버스 라이브 강좌'를 기본으로 공부하고 있습니다. 1. 그림판 기본 구조 반지름이 10인 작은 원으로 캔버스 위 선을 그려 보았으니 이제 그리는 선의 색상을 다양하게 만들어 클릭시마다 색이 변경되어 그림을 그리는게 기본 개념입니다. 한 5가지 정도 색상에 대한 버튼을 만들고 클릭이벤트를 통하여 버튼 색을 바꾸는 이벤트를 고려해야 하는데 각 버튼을 이벤트타겟에 대입시키면 되겠습니다. ① 컬러버튼 만들기 버튼이 들어가는 태그를 만들고 해당 버튼의 클래스명을 통하여..
-
JavaScript 입문 : Canvas 이론 정리 - 마우스이벤트 활용하여 선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 26. 19:30
지난 시간 캔버스 위치(좌표 읽기)에 대하여 조금 깊이 공부를 해 보았습니다. 결국 캔버스의 크기를 임의로 만들어도 전체 화면을 기준으로 수치를 계산하여 빼 줌으로써 정확한 마우스 클릭 지점에 원을 그릴 수 있었습니다. 이제 마우스 이밴트를 통하여 선을 캔버스에 그리는 방법을 공부할 텐데요. 최종 목표는 우리가 흔히 사용하는 그림판을 만들어 보는 겁니다. 관련 강좌는 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 1. 마우스이벤트에 대한 이해 캔버스위에 자유곡선으로 그림을 그린다는 것은 마우스를 클릭해서 움직일때 그려지는 것이고 마우스를 클릭하지 않으면 그림을 그리지 않는 원리입니다. 이때 사용하는 이벤트가 움직이는 것은 'mousemove', 마우스를 누르는 것은 'm..
-
JavaScript 입문 : Canvas 이론 정리 - 마우스 이벤트로 좌표 이해 및 (clientX, clientY, offsetLeft, offsetTop) 클릭되는 지점 원 그리기컴퓨터 알아가기/JavaScript 2022. 11. 25. 19:30
이번 시간에는 캔버스 위에 마우스로 작은 원을 찍는 개념을 보고자 합니다. 이를 위해서는 캔버스와 화면에서 위치를 나타내는 속성에 대한 이해가 필요한데 강좌의 내용과도 다른 내용도 있어 자신만의 환경에 맞는 상황들을 분석해 가면서 위치에 대한 개념을 잡는게 중요하다고 봅니다. 역시 본 내용은 '1분코딩 HTML5 캔버스 라이브 강좌'를 기본으로 공부해 보고자 합니다. 1. 원 그리기 함수 만들기 캔버스 위에 클릭이벤트를 활용한 원 그리기 함수를 만들어 봅니다. 마우스를 클릭하면 x, y축으로부터 100씩 떨어진 반지름 10인 원이 다음과 같이 그려집니다. 여기까지야 쉽게 만들수 있습니다. 2. 매개변수(event) 속성 확인 궁극적 목적은 마우스를 클릭하는 지점마다 원을 그리는 것이기 때문에 매개변수로 ..
-
JavaScript 입문 : Canvas Animation VI - hue를 통한 무지개 색상으로 마우스 이동시마다 애니메이션 발생컴퓨터 알아가기/JavaScript 2022. 11. 12. 19:30
Canvas를 활용한 애니메이션 6번째 시간입니다. 이제는 다양한 색상을 통하여 마우스이벤트가 발생할 때 마다 아름다운 무지개 꼬리가 따라다니는 과정을 공부하겠습니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 우선 원의 색을 하얀색으로 바꾸어 봅니다. draw( ) 함수에서 적용하면 되겠죠. 1. Color Hue 설정 컬러를 나타내는 방법은 여러가지가 있습니다. RGB숫자와 Hex 코드로 구분하거나 직접 컬러이름을 기입하는 방식으로 지금껏 사용했었는데 Hue 컬러도 있습니다. 간단히 말해 표준 색상을 0도부터 360도까지 표현할 수 있습니다. Hue 컬러를 마우스를 클릭하거나 움직일때 형성되는 입자에 반..