Animating clipping area in <canvas> element - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

Animating clipping area in <canvas> element

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
   </head> 
   <body onload="onload2();" bgcolor="yellow">   
      <script type="text/javascript">
            function onload1(){/*www . j av  a 2 s .  c  om*/
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = "#a00";
                var recW = 300;
                function animate1() {
                    ctx.clearRect(50,50,recW + 1,recW + 1);
                    ctx.beginPath();
                    ctx.rect(50,50,recW,recW);
                    ctx.clip();
                    ctx.beginPath();
                    ctx.arc(250,100,90,0,Math.PI*2,true);
                    ctx.fill();
                    ctx.rect(50 - 1, 50 - 1, recW + 2, recW + 2);
                    ctx.lineWidth = 10;
                    ctx.stroke();
                    console.log(recW);
                    recW--;
                    if (recW == 150) clearInterval(run);
                }
                var run = setInterval(function() { animate1(); },5);
            }
            function onload2(){
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = "#a00";
                var recW = 150;
                function animate2() {
                    ctx.clearRect(50,50,canvas.width,recW - 1);
                    ctx.save();
                    ctx.beginPath();
                    ctx.rect(50, 50, recW, recW);
                    ctx.clip();
                    ctx.beginPath();
                    ctx.arc(250,100,90,0,Math.PI*2,true);
                    ctx.fill();
                    ctx.restore();
                    ctx.beginPath();
                    ctx.rect(50 - 1, 50 - 1, recW + 2, recW + 2);
                    ctx.lineWidth = 10;
                    ctx.stroke();
                    console.log(recW);
                    recW++;
                    if (recW == 300) clearInterval(run);
                }
                var run = setInterval(function() { animate2(); },5);
            }
        
      </script>   
      <canvas id="canvas" width="1000" height="1000"></canvas>    
   </body>
</html>

Related Tutorials