CSS3와 Canvas로 어항만들기

Greg Murray씨가 HTML5 Fish Tank라는 재밌는 예제 프로그램 베타판을 작성했습니다. 이 프로그램은 사용자가 자신만의 물고기를 만들고, 만든 물고기를 어항에 놓을 수 있는 프로그램입니다.

또한, 이 프로그램에는 저수준(low level)의 Canvas와 CSS3 전이/변형 효과가 사용되었습니다.

[code:js]
<div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); ">
    <div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div>
    <div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div>
    <div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
    <div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div>
    <div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div>
    <div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div>
</div>

물고기의 애니메이션은 다음과 같이 작성되었습니다.

[code:js] function goFish( target) {         if ( !target.lastPoint) {             target.lastPoint = target.currentPoint;         }         if ( target.timer ) {             clearTimeout(  target.timer );         }         target.currentPoint = getRandomPoint();         target.style.webkitTransitionDuration = target.currentPoint.d;         target.style.webkitTransformOrigin = target.currentPoint .x + " " + target.currentPoint.y;         var _scale = "";         if ( target.lastPoint.x> target.currentPoint.x ) {             _scale = "rotateY(-180deg)";         } else {              _scale = "rotateY(0deg)";         }          target.style.webkitTransform =  _scale + " translate(" + target.currentPoint.x + "px, " + target.currentPoint.y + "px)";         target.lastPoint = target.currentPoint;         target.timer = setTimeout( function () {             console.log( "saved the day" );             goFish( target);         },  ( target.currentPoint.d + 2000 ) ); }

from Build a Fish Tank with Canvas and CSS3

'[IT] Web Tech' 카테고리의 다른 글

CSS calc()  (2)	2010.06.16
IE6를 퇴출시키는 치사한 방법 - amelie()  (0)	2010.06.07
배열과 객체에 SQL 질의를 하는 두 가지 방법  (0)	2010.06.05
ShowSlow : 페이지 속도를 모니터링하는 도구  (0)	2010.06.04
CSS3와 Canvas로 어항만들기  (2)	2010.06.03
움직이는 둥근 모서리  (0)	2010.05.31
이제 인터넷 속도는 중요하지 않다.  (0)	2010.05.28
WebM : 구글이 제공하는 로열티 없는 비디오 코덱  (0)	2010.05.27
CSS를 완전히 초기화 하는 방법  (0)	2010.05.26