Awesome Canvas Animation

In this example below you will see how to do a Awesome Canvas Animation with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by mlegrix, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mlegrix ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/mlegrix/awesome-canvas-animation-aAzIn */
* {
  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/mlegrix/awesome-canvas-animation-aAzIn */
(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);

Comments