帆布形状动画

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>