간단한 HTML5에 관한 이벤트를 설정하는 구문이다..

솔직히 HTML5에 관해서는 아무것도 모르기 때문에 구글링과 네이버에서 많이 찾아서 적용하고 한번...

피아노를 렉탱글로 그려봐서 이벤트를 지정해봤다.

피아노를 누를시.. 새로운 사각형을 그리고 그 사각형에는 조금 색을 넣어서 이벤트가 작동하는지 알아 봤다.

Canvas에 관해서는 담에 올리겠다.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="application/javascript">

 

 

function Init(){ //기본 페이스 함수

          ctx = document.getElementById('canvas').getContext('2d');

          window.addEventListener('keydown',getkeydown,false);//keyDown

          window.addEventListener('keyup', getkeyup,false);//keyUp

          drawall();

}

function drawall(){

<!--도-->

<!--m_ctx.clearRect(10,10,40,200);-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(10,10,40,200);

<!--레-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(50,10,40,200);

<!--미-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(90,10,40,200);

<!--파-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(130,10,40,200);

<!--솔-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(170,10,40,200);

<!--라-->

          ctx.strokeStyle="rgb(0,0,0)";

          ctx.strokeRect(210,10,40,200);

<!--1번 검정-->

          ctx.fillStyle = "rgb(0,0,0)";

          ctx.fillRect(30,10,40,120);

<!--2번 검정-->

          ctx.fillStyle = "rgb(0,0,0)";

          ctx.fillRect(110,10,40,120);

<!--3번 검정-->

          ctx.fillStyle = "rgb(0,0,0)";

          ctx.fillRect(190,10,40,120);

}

function getkeydown(event){//KeyDown Event

          var keyCode;

          if(event==null)

          {

                         keyCode = window.keyCode;

                         window.event.preventDefault();

           }else{

                          keyCode=event.keyCode;

                          event.preventDefault();

            }

            switch(keyCode)

            {

                            case 65://A=65 그래서 65값을 case문에 설정함

                            ctx.fillStyle="rgb(200,200,0)";

                            ctx.fillRect(10,10,40,200);

                             break;

               }  

}

function getkeyup(event){//KeyUp Event

                var keyCode;

                if(event==null)

                {

                               keyCode = window.keyCode;

                               window.event.preventDefault();

                 }else{

                                keyCode=event.keyCode;

                                event.preventDefault();

                   }

                   switch(keyCode)

                   {

                                 case 65:

                                 ctx.clearRect(10,10,40,200);

                                 ctx.strokeStyle="rgb(0,0,0)";

                                 ctx.strokeRect(10,10,40,200);

                                  break;

}

 

}

function startpiano()

{

}

</script>

</head>

 

<body onload="Init();">// 시작과 Init()함수를 실행한다.

<canvas id="canvas" width="500" height="300"></canvas>
</body>

</html>

 


 

저작자표시 비영리 변경금지

'프로그래밍 > HTML5+CSS' 카테고리의 다른 글

Aptana studio 3 설치 및 Nodejs 오류 해결  (6) 2015.11.25
[Aptana]Aptana Studio 3 설치하기  (4) 2013.12.16
[HTML5]HTML5 <audio> - loop  (0) 2012.01.11
[HTML5]box-shadow & -moz-linear-gradient  (0) 2012.01.11
[HTML]HTML 생삭 코드표  (0) 2012.01.06

티스토리툴바