帆布形狀動畫

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

帆布就像一個電視屏幕，你應該重新繪製每一幀，因此您的代碼將無法正常工作

<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>