졸업 작품 회의록

졸업 작품 회의록

HTML 5 -1 2012.05.23

회의 내용 • HTML5 소스 실행 • PPT로 회의 내용 정리하기(날짜, 내용, source) • 공유 사이트를 만들자 • Mail 사용하는 습관 기르기(gmail)

그림판 실행 소스 - 1 <!doctypehtnl> <html> <head> <title>그림판</title> <style> canvas {border:5px solid #000000;} </style> <meta charset="euc-kr"> <script type="text/javascript"> window.addEventListener("load", InitEvent, false); // window 객체가 로딩되면, 이벤트 InitEvent함수 실행한다 var canvas, context, tool; varcolor_change="black"; function InitEvent () { canvas = document.getElementById("drawCanvas"); // canvas 객체를 생성한다. context = canvas.getContext("2d"); // context 객체를 2d를 할 수있게 한다. 3d도 표준화할 모양이네 tool = new tool_pencil(); canvas.addEventListener("mousedown", ev_canvas, false); // canvas 객체를 마우스를 다운하면, 매개변수 mousedown를 가지고, ev_canvas함수를 수행한다. canvas.addEventListener("mousemove", ev_canvas, false); canvas.addEventListener("mouseup", ev_canvas, false); } function tool_pencil () { // 마우스를 누르는 순간 그리기 작업을 시작 한다. this.ss=false; this.mousedown = function (ev) { context.beginPath(); context.moveTo(ev._x, ev._y); this.ss = true; };

그림판 실행 소스 - 2 // 마우스가 이동하는 동안 계속 호출하여 canvas에 Line을 그려 나간다 this.mousemove = function (ev) { if (this.ss) { context.strokeStyle=color_change; context.lineTo(ev._x, ev._y); context.stroke(); } }; // 마우스 떼면 그리기 작업을 중단한다 this.mouseup = function (ev) { if (this.ss){ tool.mousemove(ev); this.ss = false; } }; } // Canvas요소 내의 좌표를 결정 한다. function ev_canvas (ev) { // Firefox 브라우저 용 if (ev.layerX || ev.layerX == 0) { ev._x = ev.layerX; ev._y = ev.layerY; } // Opera 브라우저 용 else if (ev.offsetX || ev.offsetX == 0) { ev._x = ev.offsetX; ev._y = ev.offsetY; } // tool의 이벤트 핸들러를 호출하여 tool_pencil()를 수행한다. varfunc = tool[ev.type]; func(ev); } //색을 선택한다. function color_select(n) { switch (n) { case 1: color_change="black"; break; case 2: color_change="red"; break; case 3: color_change="green"; break; case 4: color_change="pink"; break; } } </script> </head>

그림판 실행 소스 - 3 <body>  <canvas id="drawCanvas" width="400" height="300"> </canvas> <form name="frm"> 색 선택 : <input type="button" name="black" value="black" onclick="return color_select(1);"> <input type="button" name="red" value="red" onclick="return color_select(2);"> <input type="button" name="green" value="green" onclick="return color_select(3);"> <input type="button" name="pink" value="pink" onclick="return color_select(4);"> </form> </body> </html>

실행 화면

이번 주 과제 • HTML5 listview에 대한 예제 실행해 보기 • HTML5 개발 사이트 조사하기

졸업 작품 회의록

졸업 작품 회의록

Presentation Transcript