Awesome Canvas Animation

Grabs data-percent attribute of each canvas element, and applies a circular animation of that percent.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Awesome Canvas Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="title">
	<h1>Go over the below container!</h1>
  <h2>Awesome Canvas Animation</h2>
</div>
<div id="container">
  <div class="one-fourth"><canvas id="myCanvas" width="100" height="100" data-percent="30"></canvas></div>
  <div class="one-fourth"> <canvas id="one" width="100" height="100" data-percent="50"></canvas></div>
  <div class="one-fourth">  <canvas id="two" width="100" height="100" data-percent="75"></canvas></div>
  <div class="one-fourth"> <canvas id="three" width="100" height="100" data-percent="90"></canvas></div> 
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  with: 100%;
  height: 100%;
  background-color: #3880a8;
}
#title {
  width: 600px;
  height: 100px;
  margin: 0 auto;
  padding: 30px 0px;
  color: #005782;
  text-align: center;
  font-family: sans-serif;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
#container {
  width: 500px;
  height: 150px;
  margin: 0 auto;
  border: 10px solid #005782;
}

.one-fourth {
  width: 25%;
  height: 100%;
  text-align: center;
  float: left;
}
canvas {
  margin-top: 15px;
}
/* Downloaded from https://www.codeseek.co/ */
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


function animateCanvas(id) {
  var canvas = document.getElementById(id),
      ctx = canvas.getContext('2d'),
      w = canvas.width,
      h = canvas.height,
      p = canvas.dataset.percent,
      divg = (w/2) - 10, // inner div radius
      divcy = h/2, // circle y center coordinates
      divco = -(Math.PI/180)*90, // reset start of circle to top
      pinit = 0;

  ctx.strokeStyle = "#005782";
  ctx.fillStyle = "#005782";
  ctx.lineWidth = 10;
  
  function drawCircle(current) {

    ctx.clearRect(0,0,w,h);
    var divcx = w/2;
    ctx.beginPath();
    ctx.arc(divcx, divcy, divg, divco, ((Math.PI/180)*((current*360)/100))+divco);
    ctx.stroke();
    ctx.font=h/4+"px sans-serif";
    var tcx = divcx - (w/4),
        tcy = divcy + (h/10);
    ctx.fillText(current+"%", tcx, tcy);
    pinit++;

    if(pinit <= p){
      requestAnimationFrame(function(){
        drawCircle(pinit);
      });
    }

  }

  drawCircle();
  
}

var container = document.getElementById('container');

container.addEventListener('mouseenter', function(){
  animateCanvas('myCanvas');
  animateCanvas('one');
  animateCanvas('two');
  animateCanvas('three');
  animateCanvas('four');

  
  
}, false);

This awesome code ( Awesome Canvas Animation ) is write by matthieu, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © matthieu