Cooldown frame

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