画布形状动画

Question

I want to animate shapes in canvas in 3 phase appearance of the shape, moving and disappear and these should execute one after other and stop at specified time so please help me.... I m trying with this code

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 works like a tv screen, you should redraw every frame, so your code won't work

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