Canvas Element 는 HTML 5 에서 가장? 많이 주목받고 있는 새롭게 추가된 element 들 중 하나입니다.
요 녀석때문에 세간에 말이 많죠...
특히나 개발자들한테요...

실버라이트나 플래쉬는 이제 죽는거냐?
"Microsoft 는 이제 Silverlight 를 어떻게 할거냐?" (뭐 이런주제가 Canvas 때문만은 아니겠지만요... ㅋㅋ)

Canvas 는 할 수 있는 일이 너무도 많습니다.
일단 "Canvas" 라는 말 자체에서도 느낄 수 있듯이, 그림을 그릴 수 있을 것입니다. 이미지도 올릴 수 있습니다. 그렇다면 사진합성도 할 수 있겠죠? 그림을 그릴 수 있으니... 그래프도 그릴 수 있겠죠? 애니메이션도 만들 수 있고요, 게임까지도 "Canvas" 위에서 구현할 수 있습니다. 이 들에 대한 예제는 도처에 널부러져? 있습니다.

할 수 있는 것도 많으니 설명할 것들은 얼마나 많겠습니까? ^^;
많은 것을 한꺼번에 다루기에는... 그래서 꼭 알아야 할 것들만을 간단히 살펴보는 것으로 진행하려 합니다.

9-1. 사용법
<canvas id="vas" width="200" hegiht="300"></canvas>

위 Markup 을 보면 width, height 속성을 부여하고 있습니다만, 만약 이들을 지정해주지 않는다면 기본적으로 background Color 는 "Transparent" 로 width 는 300 pixel, height 는 150 pixel 로 지정합니다.

그리고 사용하는 Web Browser 가 Canvas Element 를 지원하지 않는 경우 다음과 같이 대체해서 보여줄 수있는 이미지를 지정할 수 있습니다.
<canvas id="vas" width="200" hegiht="300">
<img src="eximg.jpg" width="200" hegiht="300" alt="대체이미지" />
</canvas>

그리고 다음과 같이 Javascript 를 이용해서 Canvas Element 에 접근할 수 있습니다.
var vas=document.getElementById('vas');

var cntxt = vas.getContext('2d') // 요로케하면 2d 그림을 그릴 수 있습니당... ^^

혹시나 Canvas Element 를 지원하지 않는 IE 를 사용하시는 분들을 위해서 아래 링크에 가셔서 Javascript 라이브러리를 다운받으셔서 사용해 보시기 바랍니다. (거 있잖아요.. 평면TV 엑스캔 헤벨레.. 하고 이름이 비슷하네효.. ㅋㅋ)  



이제 슬슬 canvas 위에 그림을 그려볼까효? ^^

9-2. 2D 도형그리기

먼저 도형을 그려보지요...

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
</head>
<body>
    <canvas id="woojjaCanvas" width="200" hegiht="300"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('woojjaCanvas');
        var cvas=canvas.getContext('2d');
        cvas.fillStyle='#FF0000';
        //cvas.fillStyle="rgba(255,0,0,0.3)";
        cvas.fillRect(10,10,80,100);
    </script>
</body>
</html>


 


fillStyle 은 16진수로 적으셔도 되고요..
cvas.fillStyle="rgba(255,0,0,0.3)";  와 같이 rgba 값을 이용해도 되는데
a 값은 alpha 값으로 투명도를 나타낸다는 것. 잘 아실테고 값은 0~1 사이값을 넣어주시면 됩니다.
아래 이미지는 rgba 값을 적용한 것입니다.


 함수  
 fillRect  속을 채운 사각형을 그립니다.
 strokeRect  사각형 테두리만 그립니다. 
 clearRect  지정한 사각영역을 투명하게 지웁니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
 <style type="text/css">
  #woojjaCanvas { border:1px solid #000000;}
 </style>
</head>
<body>
    <canvas id="woojjaCanvas" width="300" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('woojjaCanvas');
        var cvas=canvas.getContext('2d');
        cvas.fillStyle='#FF0000';
        //cvas.fillStyle="rgba(255,0,0,0.3)";

        cvas.fillRect(10,10,150,180);
        cvas.
clearRect(20,20,70,90);
        cvas.
strokeRect(30,30,200,100);
    </script>
</body>
</html>


위 Markup 을 Web Browser 로 봤습니다.

사각형만 살펴보았는데요.
arc 를 이용하여 원을 그릴 수 있습니다.
원그리기는 숙제? ㅋㅋㅋ  

9-3. 선긋기

이번엔 선 긋기를 해보려합니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
 <style type="text/css">
  #woojjaCanvas { border:1px solid #000000;}
 </style>
</head>
<body>
    <canvas id="woojjaCanvas" width="300" height="200"></canvas>
    <script type="text/javascript">

        var canvas=document.getElementById('woojjaCanvas');
        var cvas=canvas.getContext('2d');

        cvas.beginPath();

        cvas.lineWidth=15;
        cvas.lineCap="round";

        cvas.lineTo(20, 50);
        cvas.lineTo(100, 150);
        cvas.stroke();

        cvas.lineTo(60, 50);
        cvas.lineTo(140, 150);
        cvas.stroke();

  
        cvas.moveTo(120, 20);
        cvas.lineTo(200, 180);
        cvas.stroke();
 
        cvas.moveTo(180, 40);
        cvas.lineTo(240, 150);
        cvas.stroke();

        cvas.clothPath();

    </script>
</body>
</html>



직선말고도 quardratiCurve(2차 베지어곡선), bezierCurveTo(3차 베지어곡선) 등의 함수를 이용해서 곡선을 그릴 수 있습니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
 <style type="text/css">
  #woojjaCanvas { border:1px solid #000000;}
 </style>
</head>
<body>
    <canvas id="woojjaCanvas" width="300" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('woojjaCanvas');
        var cvas=canvas.getContext('2d');
        cvas.beginPath();
        cvas.lineWidth=15;
        cvas.lineCap="round";
        cvas.lineTo(200, 50);
        cvas.lineTo(240, 100);
        cvas.lineTo(280, 70);
        cvas.lineTo(200, 50);
        cvas.clothPath();
        cvas.fill();
    </script>
</body>
</html>


위와 같이 clothPath 함수를 이용하여 선긋기를 닫으면 속이 찬 도형을 그릴 수 있습니다.

9-4. 문자 넣기
문자 넣기 또한 그렇게 어렵지 않습니다.
한번 넣어 볼까요?
textAlign 을 여러가지로 바꿔서 넣어봤습니다. shadow 효과도 넣어봤구요.
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
 <style type="text/css">
  #woojjaCanvas { border:1px solid #000000;}
 </style>
</head>
<body>
    <canvas id="woojjaCanvas" width="500" height="300"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('woojjaCanvas');
        var cvas=canvas.getContext('2d');

        cvas.font = "30px Gothic";
        cvas.fillStyle = "rgba(255,0,0,1)";

        cvas.shadowColor = "rgba(0,255,0,0.9)";
        cvas.shadowOffsetX="10";
        cvas.shadowOffsetY= "10";
        cvas.shadowBlur="15";

        cvas.textAlign = "start";
        cvas.fillText("SQLER 화이팅!!!", 150, 30);

        cvas.textAlign = "end";
        cvas.fillText("SQLER 화이팅!!!", 150, 70);

        cvas.textAlign = "left";
        cvas.fillText("SQLER 화이팅!!!", 150, 110);

        cvas.textAlign = "center";
        cvas.fillText("SQLER 화이팅!!!", 150, 150);  

        cvas.textAlign = "right";
        cvas.fillText("SQLER 화이팅!!!", 150, 190);

        cvas.textAlign = "center";
        cvas.strokeStyle = "#0000FF";
        cvas.strokeText("SQLER 화이팅!!!", 150, 240);

    </script>
</body>
</html>

fillText 함수와 strokeText 함수에 따라서 Text 의 모양을 결정할 수 있습니다.
shadow 관련 함수에 따라서 아래와 같이 Text 에 음영을 적용할 수 있습니다.


위에 보시는 바와 같이 textAlign 값 변경에 따라서 배치가 달라지는 것을 보실 수 있습니다. ^^


9-5. 이미지 삽입

그럼 이번엔 이미지를 넣어볼까요?

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
    <style type="text/css">
        #woojjaCanvas { border:1px solid #000000;}
    </style>
    <script type="text/javascript">
        function drawCanvas() {
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');
            var ballet = new Image();
            ballet.src='IMG_4687.jpg';
            cvas.drawImage(ballet, 10, 10);
        };
    </script>
</head>
<body onload="drawCanvas();">
    <canvas id="woojjaCanvas" width="420" height="286"></canvas>
</body>
</html>

drawImage 함수를 사용하여 image 를 Canvas 에 그려넣습니다.



훔...그런데...  ie 에서는 이미지가 뜨질 않는군요... ㅡㅡ'

9-6. 그래프

그럼 이미지와 선들을 함께 그려서 그래프를 그려보도록 하겠습니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML 5 Canvas 예제</title>
    <style type="text/css">
        #woojjaCanvas { border:1px solid #000000;}
    </style>
    <script type="text/javascript">
        function drawCanvas() {
            var canvas=document.getElementById('woojjaCanvas');
            var cvas=canvas.getContext('2d');
            var ballet = new Image();
            ballet.src='canvas_back.png;

            cvas.drawImage(ballet, 10, 10);
            cvas.beginPath();
            cvas.strokeStyle='#FF0000';

            cvas.lineTo(60,313);
            cvas.lineTo(120,166);
            cvas.lineTo(180,76);
            cvas.lineTo(240,250);
            cvas.lineTo(300,70);
            cvas.lineTo(360,200);
            cvas.lineTo(420,120);
            cvas.lineTo(480,70);

            cvas.stroke();

        };
    </script>
</head>
<body onload="drawCanvas();">
    <canvas id="woojjaCanvas" width="541" height="364"></canvas>
</body>
</html>



배경이미지를 그리고나서 그 위에 선을 긋는 방식으로 그래프를 완성 했습니다.
위 Markup 의 값과 그래프의 값이 맞지는 않지만...
이런방식으로 그린다는 것을 보여드리려고... ^^' 

9-7. 여러 예제사이트
지금까지는 Canvas 를 단순하게 다루는 것을 설명했었지만, 캔버스는 정말 많은 것을 만들어 낼 수 있습니다.
그런 예가 될 수 있는 사이트는 정말 많은데요...
몇가지 예를 들어 보도록 하겠습니다.

1. Test Drive Site Map
http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html
내의 Canvas 예제

2. Tron


http://disneydigitalbooks.go.com/tron/

3. MugTug



http://mygtug.com/sketchpad/

4. Pacman



http://html5games.net/game/google-pacman



지금까지 Canvas 에 대해서 한번 살펴 보았습니다.
살펴본 사항들 보다 살펴보지 못한 사항들이 더 많으니까요.
한번 직접 테스트를 해보시면서 살펴보지 못한 사항들을 체크해 보시기 바랍니다.

그럼...



행복한 고수되셔요..



woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 12. Offline Web Application  (0) 2011.06.18
[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08

Audio Element 도 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나죠.

Audio Element 도 video Element 와 그 사용법은 다르지 않습니다.
큰 차이점이라면... Poster 속성이 없다는 것!!! 입니다.

그럼 기본적인 사용방법을 살펴보겠습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg"></audio>

그럼 여기에...
audio file 을 자동적으로 재생시키려면...

<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay"></audio>

이렇게 하면 되겠습니다.

Audio Element 도 Video Element 처럼 Web Browser 가 Audio Element 를 지원하느냐에 따라 실행여부를 알 수 있는데..
Web Browser 가 Audio Element 를 지원하지 않을 때 특정 문구를 표시할 수 있도록 지원 시킬수 있습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg" autoplay>
<p>Your browser does not support audio tag</p>
</audio>

Audio Element 도 Vedio Element 와 같이 재생 control 을 표시할 수 있습니다.

<audio src="http://www.w3schools.com/html5/horse.ogg" controls></audio>
또는
<audio src="http://www.w3schools.com/html5/horse.ogg" controls="controls"></audio>


다음은 Audio Element 가 사용할 수 있는 속성들을 소개하겠습니다.

 속성명 값  기능 
 src  파일 경로  Source
 autoplay  autoplay  페이지가 Load 되자마자 사운드를 재생할지를 지정합니다.
 controls  controls  플레이어를 표시합니다.
 loop  재생횟수  audio 를 반복 재생할 횟수를 지정합니다.
 preload  none, auto, meta  Page 가 열리면 audio 를 미리 Load 합니다. 

음... 이번엔 audio Element 가 지원하는 Audio 코덱들을 살펴보도록 하겠습니다.
   IE FireFox  Opera Chrome  Safari  
 Vorbis(oga, ogg)  X  O  O  O  X
 wav, wma  O  O  O  X  O
 mp3  O  X  X  O  O
 AAC  O  X  X  O  O


마지막으로 Control 의 모양을 한번 보도록 하죠...

<audio controls="controls" id="ado">
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.mp3"/>
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.ogg"/>
  <source src="
http://test2.momac.net/html5/demo_audio/youaremylife_instrumental.wav"/>
  <p>Your browser does not support the audio tag.</p>
</audio>




Video 의 Control 모양과 다르지 않죠? ^^


오늘은 간단히 audio Element 에 대해서 살펴보았습니다.

다음은 가장? 관심이 많으실 Canvas Element 에 대해서 알아보도록 하죠...

그럼 행복한 고수되셔요..


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 11. Drag & Drop API  (0) 2011.06.18
[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 8. Video Element  (3) 2011.06.10
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05

Video Element 는 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나입니다. 
지금까지 웹페이지에 동영상을 삽입하고 싶을때는 object Element 나 Embed Element 를 사용하여 Flash, media player 와 같은 플러그인을 이용하여야 했습니다.
그러나, 이제 HTML 5 에서는 플러그인없이도 동영상을 웹페이지에 쉽게 삽입할 수 있습니다.
그리고, 다음과 같이 object, embed Element 와는 다른 점이 있습니다.

  • 재생, 일시중지 등 Web Browser 자체 Control 이 있습니다.
  • Source 에 파일을 여러개를 지정할 수 있어서 Web Browser 의 지원 Format 에 따라 표시 할 수 있습니다. 

<!DOCTYPE HTML>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 5 Video 예제</title>
  </head>
  <body>
    <video width="320" height="240" controls="controls">
      <source src="
http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
      <source src="
http://www.w3schools.com/html5/movie.webm" type="video/webm" />
      <source src="
http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
      <p>Your browser does not support the video tag.</p>
    </video>
  </body>
</html>

rowser 별 지원 비디오 코덱을 위 Markup 을 바탕으로 아래 표에 간략히 정리해 보았습니다.
   IE 9 FireFox 3.6.17 Opera 11.11 Chrome 12.0.742 Safari 5.0.5
 Ogg  X  O  O  O  X
 MPEG 4  O  X  X  O   O 
 WebM  △  X  O  O  X
(IE 10 beta 는 아직 설치를 안해봤으므로 설치하고 업데이트 하겠습니다. ㅡㅡ')

IE 9 에다가 WebM 란에는 "△" 표시를 했는데 이유는요...
기본적으루다가 지원을 하는 것이 아니고...
코난님께서도 소개해주신바 있는 글인데요..
http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx
를 확인해 보시면 알 수 있듯이...

webM Componenent 를 설치하시고 Refresh 를 하셔야 보실 수 있을 겁니다.
^^
아래 이미지는 설치 과정입니다.

 

그 해당싸이트는 위와같이 접근 할 수도 있습니다.
http://ie.microsoft.com/testdrive/


클릭해보면.. 아래 페이지로 이동합니다.

다시 다운 받을수 있는 곳으로 이동을 합니다.

확인하시고요...

설치가 다 끝났나 봅니다.


아... 인제 보이네요... ^^



그럼 이번에는 각 Web Browser 마다 제공하는 기본 Control 의 모양을 살펴보죠.


IE 의 모양입니다.


FireFox 의 모양입니다.


Safari 의 모양입니다.


각 Web Browser 마다 특색이 나타나는 것을 확인해 볼 수 있습니다.


이제 Video Element 를 사용하는 방법을 알아보도록 하겠습니다.

<video src="sqler.mp4"  loop="loop">
<p>이 문장이 보인다면 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>

속성 설명 
 controls  재생 Control 표시를 제어합니다.
 autoplay  동영상이 Loading 되면 곧바로 재생을 시작합니다.
 autobuffer  이 속성을 사용하게 되면 사용하기 전부터 다운로드가 진행됩니다. 사용자가 재생할 때쯤이면 동영상이 어느 정도 다운로드가 된 상태일 것입니다. 
 poster  동영상이 Download 중이거나 Buffering 중에 나타낼 이미지를 지정합니다.
 loop  동영상을 반복 재생합니다.
 width  동영상의 너비를 지정합니다.
 height  동영상의 높이를 지정합니다.

하지만, Web Browser 마다 지원하는 동영상이 다르므로 아래 Markup 처럼 둘 이상의 여러 포맷을 준비해 두어 Source Element 를 이용하여 모든 Web Browser 에서 재생가능하도록 해야할 것입니다.

<video controls=controls poster="image/poster/sqler.png">
<source src="media/video/sqler.ogg" type="video/ogg">
<source src="media/video/sqler.mp4" type="video/mp4">
<object data="media/video/sqler.mov">

<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</object>
</video>


이런 Video Element 는 javascript 를 사용하여 자유롭게 동영상을 조작할 수 있습니다.
너무 간단하긴 하지만 아래와 같은 arkup 으로 Web Browser 가 제공하는 Control 이 아닌 사용자가 직접 제작할 수 있는 Control 을 제작해 보았습니다.
<video id="vdo" src="media/video/sqler.ogg" poster="image/poster/sqler.png">
<p>이 문장이 보인다면 HTML 5 의 video Tag 를 지원하지 않는 Web Browser 를 사용하고 계시는 겁니다.</p>
</video>
<p>
<button onclick="document.getElementById('vdo').pause()">Pause</button>
<button onclick="document.getElementById('vdo').play()">Play</button>
<button onclick="document.getElementById('vdo').currentTime = 0">|<</button>
<button onclick="document.getElementById('vdo').currentTime += 5">>></button>
</p>
<script>
var vdo = document.getElementById('vdo');
if(vdo != null && vdo.addEventListener)
{
 vdo.addEventListener(
'ended',
function() {
 alert('The video has ended.');
},
false);
}
</script>


아래와 같이 외부 Control 을 확인하실수 있습니다.


이 상으로 간단하게 Video Element 를 사용하는 방법에 대해서 간단하게 살펴보았습니다.
동영상 조작을 위한 외부 Contorl 들을 제작하기에도 그리 어렵지 않을 것이라는 생각이 드네요...
그런 생각은 정작 만들면 사라질 수도 있겠지만 말입니다.

다음은 Audio Element 에 대해서 살펴보기로 하겠습니다.


행복한 고수되셔요...

woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


PS) www.w3schools.com 사이트를 추가적으로 참조하였음을 말씀드립니다.
반응형

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 10. Canvas Element  (2) 2011.06.18
[HTML 5] 9. Audio Element  (0) 2011.06.14
[HTML 5] 7. Rich Text Edit API  (0) 2011.06.08
[HTML 5] 6. Strong Web Form  (0) 2011.06.05
[HTML 5] 5. Sementic Element (2)  (1) 2011.06.01

+ Recent posts