requestAnimationFrameÀ» ÀÌ¿ëÇÑ ¾÷µ¥ÀÌÆ® ÇÁ·¹ÀÓ¿÷ Äڵ带 Á¤¸® ÇÏ¿´´Ù. ½Ã°£À» °ü¸®ÇÏ´Â ÇÔ¼ö¿Í »À´ë ÇÔ¼ö¸¸ ³²±â¸é ÄÚµå´Â ´ÙÀ½°ú °°´Ù. var render = function(degree) {
} var clearCanvas = function() { }; var endCooldown = function() { clearCanvas(); timer = null; } var getTime = function() { return new Date().getTime(); } var onFrameCooldown = function() { var now = getTime(); updateCooldown((now - lastTime)/1000.0); lastTime = now; requestAnimationFrame(onFrameCooldown); } var updateCooldown = function(deltaTime) { remainedTime = remainedTime + deltaTime; if (remainedTime > frameTime) { remainedTime -= frameTime; render(); } } var initCooldown = function() { timer = setTimeout(endCooldown, 3000); lastTime = getTime(); render(0); onFrameCooldown(); } } function play() { if (!timer) initCooldown(); } 1. ÃʱâÈ play°¡ µÇ¸é Ãʱâȸ¦ ¸ÕÀúÇÑ´Ù. ·çÇÁ¸¦ µ¹±â À§ÇØ onFrameCooldown( ) ÇÔ¼ö¸¦ ½ÇÇàÇÑ´Ù. ·çÇÁ¿¡ ÁøÀÔÇϱâ Àü¿¡ ¸¶Áö¸· ½Ã°£ ¾÷µ¥ÀÌÆ® º¯¼ö lastTimeÀ» ¼³Á¤ÇÑ´Ù. deltaTime µ¿¾È ¾È±×·ÁÁö±â ¶§¹®¿¡ render(0)À» ÇѹøÀº ±×¸®µµ·Ï ÇÑ´Ù. var initCooldown = function() {
timer = setTimeout(endCooldown, 3000); lastTime = getTime(); render(0); onFrameCooldown(); } } 2. ·çÇÁ lastTime : new Date().getTime()À¸·Î ±¸ÇÑ´Ù. ´ÜÀ§´Â ¹Ð¸®¼¼ÄÁµå·Î 1/1000 ÃÊÀÌ´Ù. updateCooldown¿¡ delta timeÀ» ³Ñ°Ü ÁØ´Ù. ·çÇÁ¸¦ µ¹±â À§ÇØ requestAnimationFrame ÇÔ¼ö¸¦ ½ÇÇàÇÑ´Ù. var onFrameCooldown = function() {
var now = getTime(); updateCooldown((now - lastTime)/1000.0); lastTime = now; requestAnimationFrame(onFrameCooldown); } 3. ƯÁ¤½Ã°£ ¸¶´Ù ·»´õ¸µ Á¦ÀÏ Áß¿äÇÑ ÇÔ¼ö·Î deltaTimeÀ» ¾î¶»°Ô ÀÌ¿ë ÇÏ´ÂÁö Àߺ¸¿© ÁÖ°í ÀÖ´Ù. frameTime ½Ã°£ÀÌ Áö³ª¸é render ÇÔ¼ö¸¦ È£ÃâÇÑ´Ù. var updateCooldown = function(deltaTime) {
remainedTime = remainedTime + deltaTime; if (remainedTime > frameTime) { remainedTime -= frameTime; render(); } } 4. Á¾·á Çϱâ ƯÁ¤ ½Ã°£ ÈÄ¿¡ endCooldown ÇÔ¼ö°¡ ½ÇÇà µÈ´Ù. timer = setTimeout(endCooldown, 3000);
var endCooldown = function() { clearCanvas(); timer = null; } <ÆÁ: setTransform¿¡ ´ëÇØ> setTransform(1, 0, 0, 1, 0, 0)Àº ¾Æ¹«·± º¯È¯ÀÌ ¾ø´Ù. º¯È¯ Çà·Ä·Î ´ÙÀ½°ú °°ÀÌ ³ªÅ¸³½´Ù. a c e b d f 0 0 1 ctx.setTransform(1, 0, 0, 1, 0, 0);
µ¥¸ð: test03.html Âü°í) setTransform¿¡ ´ëÇØ http://www.htmq.com/canvas/setTransform.shtml requestAnimationFrame ÇÁ·¹ÀÓ http://forest71.tistory.com/138 |