‘2013 정보영재교육세미나 HTML5 CANVAS HTML5 캔버스 소개 지도 : 김태영 교수님 발표자 : 김병조
1.6 Console.log로 디버깅 1.7 2D 컨텍스트와 현재 상태 정보 1.8 HTML5 캔버스 객체 1.9 GUESS The Letter 예제 1.9.2 게임의 변수 1.9.1 작동원리 1.9.3 initGame() 함수 1.9.4 eventKeyPressed()함수 1.9.5 drawScreen() 함수 1.9.6 캔버스에서 이미지로 변환
1.6 Console.log로 디버깅 Console.log를 지원하는 브라우저 크롬, 오페라, 사파리, 파이어폭스(부가기능) (IE8 이외..) Console.log로 디버깅 예) console.log(“메시지”) Console.log로 디버깅하면 에러 발생함. Console.log 함수를 지원할때만 사용하도록 Debugger.log라는 함수를 만들어서 사용함. var Debugger = function () { }; Debugger.log = function (message) { try { console.log(message); } catch (exception) { return; } }
theCanvas.getContext(“2D”); (0,0) 좌표계 theCanvas.getContext(“2D”); 그리기 동작이 일어나는 장소 (2D 컨텍스트) * 변환 행렬 크기 조절, 회전, 변환 , 이동 * 자르기 영역 Clip()으로 생성 * 컨텍스트의 영역 StrokeStyle, fillStyle, globalAlpha, wineWidth,.... 컴퓨터 화면 (1920,1080)FULL HD 경우
Canvas객체는 <body>안에 <canvas>태그를 넣어서 만든다. 캔버스의 인스턴스를 만드는 코드 1.8 HTML5 캔버스 객체 ` Canvas객체는 <body>안에 <canvas>태그를 넣어서 만든다. 캔버스의 인스턴스를 만드는 코드 var theCanvas = document.createElement(“canvas”); Canvas 객체에는 메서드와 width, height 속성이 있음. width는 폭, height는 높이를 말하는데, 페이지 코드 내에서 변경가능. 즉, 동적으로 캔버스의 크기를 조절 가능함. Canvas객체의 공개 메서드 getContext() : 캔서스에 그릴 때 사용하는 캔버스 2D컨텍스트의 참조값을 구한다. toDataURL() : 지금 그리는 Canvas 객체의 비트맵 이미지의 스트링 정보를 넘긴다. 스크린샷 찍기와 비슷한 기능임.
1.9 Guess the Letter예제 IE8에서의 에러화면 실행화면 컴퓨터가 임의로 선택한 문자를 참가자가 맞추는 게임. 몇 번 추측했는지 알려줌 이미 나온 문자를 나열해서 보여줌 정답이 추측한 알파벳보다 높은지, 낮은지 힌트로 알려줌
다른 함수는 canvasApp()안에서 선언됨 캔버스에 문자를 그릴 때는 drawScreen() 함수 사용. 1.9.1 게임의 작동원리 기본 구조는 Hello World와 같음 canvasApp()이 메인 함수임 다른 함수는 canvasApp()안에서 선언됨 캔버스에 문자를 그릴 때는 drawScreen() 함수 사용.
guesses : 게임 참가자가 문자를 누른 횟수 message : 게임 방법을 설명하는 텍스트를 저장 1.9.2 게임의 변수 guesses : 게임 참가자가 문자를 누른 횟수 message : 게임 방법을 설명하는 텍스트를 저장 letters : 알파벳 문자가 순서대로 들어있는 배열. 게임의 정답을 임의로 고르거나 문자의 상대적 위치를 알아냄. today : 현재날짜. 화면에 날짜를 표시하는 용도 letterToGuess : 참가자가 맞춰야 하는 정답문자 higherOrLower : 추측한 문자와 정답문자를 비교해서 낮으면 Lower를, 높으면 Higher를 갖는다. letterGuessed : 참가자가 이미 추측했던 문자를 저장하는 배열 GameOver : 게임이 끝나기 전에는 false, 게임이 끝나면 True가 되어 화면에 “You Win”이란 메시지를 출력하는 것을 판단하는 데 사용함.
1.9.3 initGame() 함수 var letterIndex=Math.floor(Math.random()*letters.length); letterToguess = letters[letterIndex]; -> 문자 배열에서 임의의 문자를 골라 letterToguess변수에 넣음. window.addEventListner(“keyup”,eventKeyPressed,true); -> window(창)객체가 키보드의 keyup(키를 눌렀다 놓음) 이벤트를 기다리도록 함. 키를 누르면 eventkeyPressed 이벤트 핸들러가 호출된다. initGame()의 전체 코드 function initGame() { var letterIndex = Math.floor(Math.random() * letters.length); letterToGuess = letters[letterIndex]; guesses = 0; lettersGuessed = []; gameOver = false; window.addEventListener("keyup",eventKeyPressed,true); var formElement = document.getElementById("createImageData"); formElement.addEventListener('click', createImageDataPressed, false); drawScreen(); }
if (!gameOver) -> gameOver변수가 false인지 확인함. 1.9.4 eventKeyPressed()함수 (1) if (!gameOver) -> gameOver변수가 false인지 확인함. var letterPressed = String.fromCharCode(e.keyCode); -> 눌러진 키 값을 구해서 letterToGuess의 문자와 같은지 검사하기 위해서 알파벳 문자로 바꿈. letterPressed = letterPressed.toLowerCase(); -> 실수로 캡스록을 눌렀을 때를 대비해 소문자로 변환함. guesses++; -> 추측한 횟수를 한번 늘림. lettersGuessed.push(letterPressed); -> Array.push()-배열의 끝에 아이템을 추가함- 메서드로 방금 입력한 문자를 letterGuessed배열의 끝에 추가함.
7. } else { letterIndex = letters.indexOf(letterToGuess); 1.9.4 eventKeyPressed()함수 (2) if (letterPressed == letterToGuess) { gameOver = true; } -> letterPressed가 letterToGuess와 같으면 게임이 끝남. 7. } else { letterIndex = letters.indexOf(letterToGuess); guessIndex = letters.indexOf(letterPressed); -> letterIndex는 정답인 알파벳 문자의 순서(a면 1, b면 2, ..) guessIndex는 입력한 알파벳 문자의 순서임. IndexOf() 메서드-문자열 안에 해당 문자가 포함되었는지, 위치를 출력함-를 이용함. 8. if (guessIndex < 0) {higherOrLower = "That is not a letter"; } else if (guessIndex > letterIndex) { higherOrLower = "Lower"; } else {higherOrLower = "Higher“;} -> guessIndex가 크면 Lower를, letterIndex가 크면 Higher를 higherOrLower 변수에 넣음. 9. drawScreen(); -> drawScreen() 함수를 호출해서 화면에 그림
여러 변수의 값을 Canvas Text API를 이용해 화면을 그림 1.9.5 drawScreen() 함수 여러 변수의 값을 Canvas Text API를 이용해 화면을 그림 context.textBaseline=“top”; -> 그리드 박스의 맨 위 또는 폰트 모양에서 가장 높은 위치가 기준선이 된다. Context.fillStyle=“#ffffaa”; -> 색깔을 바꿈. context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260); -> LettersGuessed배열에서 toString() 메서드만 사용하면 콤마로 구분된 배열값이 자동으로 출력됨. if (gameOver) { context.fillStyle = "#FF0000" context.font = "40px _sans"; context.fillText ( "You Got it!", 150, 180);} -> gameOver의 값이 true가 되면 40픽셀로 You Got it 이라고 출력됨.
1.9.6 캔버스에서 이미지로 바꾸기 <form> <input type="button" id="createImageData" value="Export Canvas Image"> </form> -> HTML페이지에서 폼 버튼을 만들고 ID를 createImageData로 지정 var formElement = document.getElementById("createImageData"); -> init()함수 안에서 document객체의 getelementById 메서드로 form요소에 대한 참조값을 구함. formElement.addEventListener('click', createImageDataPressed, false); -> 버튼을 누르는 이벤트에 대한 이벤트 핸들러로 createImageDataPressed()함수를 설정한다. function createImageDataPressed(e) { window.open(theCanvas.toDataURL(),"canavsImage","left=0,top=0,width=" + theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0"); } -> canvasAPP() 안에서 createImageDataPressed() 함수를 이벤트 핸들러로 선언한다. window.open()-새창으로 열기-을 할 때 매개변수로 넘길 윈도우 정보 값으로 theCavas.toDataURL()메서드의 리턴값을 넘긴다. 이 값을 넘기면 이미지는 PNG 파일의 형태로 새 윈도우에 출력된다.