캔버스 모양 애니메이션

Question

모양의 3 단계 모양으로 움직이는 모양의 캔버스에 애니메이션을 적용하고 싶습니다. 이것들은 하나를 실행하고 지정된 시간에 중지해야하므로 제발 도와주세요. 나는 노력하고 있습니다.

function dummy_animate(){ 
    //execute it one after other.... 

    shadow(); 

    setTimeout("fadein_rect()" , 3000); 

    move_timer = setInterval(drawIt1,100); 

    timerId_out = setInterval("fadeout()", 300); 
} 

Answer 1

캔버스 TV 화면처럼 작동이 코드는, 당신은 모든 프레임을 다시 그려야하므로 코드는 캔버스를 지울 수 있습니다 함수의 각

<canvas></canvas> 
<style type="text/css"> 
    body{height:100%;width:100%;margin:0;padding:0;border:0;} 
</style> 

<script type="text/javascript"> 
(function() { 
    var canvas = document.body.children[0], 
    docElem = document.documentElement, 

    h = canvas.height = docElem.clientHeight, 
    w = canvas.width = docElem.clientWidth, 
    ctx = canvas.getContext("2d"), 
    timeout = 33, 
    hc = h/2, 
    wc = w/2, 
    spd = 5; 

    //console.log(ctx); 
    function clear () { 
     ctx.fillRect (0, 0, w, h); 
    } 

    function update () { 
     clear(); 
     moveLeft(); 
    } 

    function moveLeft () { 
     ctx.beginPath(); 
     ctx.moveTo (wc, hc); 
     ctx.lineTo (wc = wc - spd, hc); 
     ctx.closePath(); 
     ctx.stroke(); 
    } 

    function init () { 

     ctx.lineWidth = 5; 
     ctx.strokeStyle = "rgb(255,255,255)"; 

     // fade mask style 
     // this is a very simply demo so i use this 
     ctx.fillStyle = "rgba(0,0,0,0.3)"; 

     setInterval (update , timeout); 
    } 

    init(); 
})()  

</script>