Arc animation on canvas - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

Arc animation on canvas

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.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

body {/*from w w  w  .  j av  a2s.com*/
   background-color: ivory;
}
canvas {
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 50;
var PI2 = Math.PI * 2;
var cx = 150;
var cy = 150;
var radius = 110;
var arcCount = 8;
var angleIncrement = PI2 / arcCount;
var divider = PI2 / 90;
var startTime;
var animationDuration = 2000;
drawGoldArcs();
function drawGoldArcs() {
    ctx.strokeStyle = "gold";
    for (var i = 1; i <= arcCount; i++) {
        var starting = angleIncrement * (i - 1);
        var ending = angleIncrement * (i) - divider;
        ctx.beginPath();
        ctx.arc(cx, cy, radius, starting, ending);
        ctx.stroke();
    }
}
function drawWhiteArc(elapsed) {
    var starting = PI2 * elapsed / animationDuration - divider;
    var ending = starting + angleIncrement;
    ctx.beginPath();
    ctx.arc(cx, cy, radius, starting, ending);
    ctx.strokeStyle = "white";
    ctx.stroke();
}
function animate(time) {
    if (!startTime) {
        startTime = time;
    }
    var elapsed = time - startTime;
    if (elapsed < animationDuration) {
        requestAnimationFrame(animate);
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGoldArcs();
    drawWhiteArc(elapsed);
}
$("#test").click(function () {
    startTime = null;
    requestAnimationFrame(animate);
});
    });

      </script> 
   </head> 
   <body> 
      <button id="test">Animate</button> 
      <br> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials