畫布形狀動畫

Question

我想在畫布上以形狀的三個階段外觀為形狀進行動畫處理，然后移動並消失，它們應該一個接一個地執行，並在指定的時間停止，因此請幫助我。...我正在嘗試使用此代碼

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