자바스크립트 키보드 입력값 화면에 표시하기 2편

https://soo0100.tistory.com/2646

자바스크립트 키보드 입력값 화면에 표시하기 1편

 

 

지난 시간에는 자바스크립트를 담을 웹 페이지를 만들었고, 

1. 자바스크립트 코드 연결

2. 캔버스 엘리먼트 만들기

이 두 가지를 해보았다.

 

이번시간에는 키보드를 입력받는 실제 자바스크립트 코드를 만들어본다.

하기 코드에서는 우선, H5 문서에서 캔버스를 가져온 뒤

(2D 그림을 그릴 예정이므로, 컨텍스트 2d 타입으로 얻어온다) 이후 컨텍스트의 크기와 배경색상을 지정한다.

* 참고로, 컨텍스트란 그림을 그리기 위한 설정도구라 생각하자. 

그것이 붓과 펜 이 될수 있기에, 하기에서는 색상과 네모 상자의 크기를 설정했다.

//윈도우 창이 다 불리면 drawScreen 함수를 호출해라.
window.addEventListener("load",drawScreen,false);

function drawScreen(){
  //연결된 HTML문서에서 캔버스를 가져온다
  var canvas = document.getElementById("canvas");
  // 2D 그림을 그리기 위해서 컨텍스트를 가져온다.
  var canvas2D = canvas.getContext("2d");

  //배경색 설정 (검정)
  canvas2D.fillStyle = "#000000";
  //배경 크기 설정
  canvas2D.fillRect(0, 0, 800, 600);
}

 

첫 라인의 window.addEventListener() 함수는

load 웹 페이지가 다 로드되면 자동으로 drawScreen 함수를 호출하라는 뜻으로, 이벤트 리스너 함수라고 불리고 쓰인다. 대부분의 프로그래밍 언어에서 사용하는 동일한 방법이니 자주 사용하고 익숙해지면 자연스러워진다.사실 보통 언어가 다 이러하다. 잡담은 여기까지...

 

작성된 코드를 실행하면,

800*600 사이즈의 블랙 도화지가 완성된 것을 볼 수 있다.

다음 시간에는

마지막으로 키보드 입력 값을 화면에 출력하는 자바스크립트 코드를 추가해본다.

 

 

자바스크립트 키보드 입력값 화면에 표시하기 3편