반응형
자바스크립트 키보드 입력값 화면에 표시하기 3편
자바스크립트 키보드 입력값 화면에 표시하기 2편https://soo0100.tistory.com/2646 자바스크립트 키보드 입력값 화면에 표시하기 1편키보드 입력값을 브라우저 화면에 출력하는 예제를 만들어본다.키
soo0100.tistory.com
이번 시간은 자바스크립트 코드로 마우스 이벤트를 받는 동작을 구현해본다.
지난 시간 키보드 입력 과 이미지 출력에 이어서 진행한다.
먼저, 껍데기가 되는 HTML 문서를 만든다.
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>키보드 + 마우스 이벤트 나타내기</title>
<script src="keyboardEvent.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"
style = "position: absolute; top: 0px; left: 0px; border: 1px solid red;">
캔버스를 부를 수 없습니다.
</canvas>
</body>
</html>
1-1. 자바스크립트 코드를 연결한다.
1-2. 그림을 그리기 위해서 캔버스 엘리먼트를 만들고, 사이즈를 설정한다.
이번 시간은 캔버스 사이즈를 보다 정확히 알기위해서 border 속성을 추가했다.
캔버스 영역이 빨간색 선으로 표기 된다.
이번시간 결과물은 아래와 같다. 캔버스 영역이 빨간색으로 나오는 것을 볼 수 있다.
이제, 키보드 동작에 이어 마우스 이벤트를 적용해보겠다.
자바스크립트 코드는 다음편에서 진행한다.
반응형
'앱 만들기' 카테고리의 다른 글
| 자바스크립트 마우스 이벤트 동작시키기 2편 (3) | 2024.09.15 |
|---|---|
| 구글개발자 콘솔 데이터 보안양식이 잘못됨 경고 또는 앱 삭제시 조치 방법 (2) | 2023.05.24 |
| 구글 플레이 리뷰 그리고 나비 효과... (8) | 2020.10.21 |
| 1인 개발자가 꼭 알아야 할 무료 폰트 사이트 (6) | 2020.09.19 |
| 안드로이드 효과음 재생하기. (2) | 2020.06.07 |
댓글