Animate a Canvas circle to draw on load

Question

OK Hello.

I've decided to start using HTML canvas for a small project I have.

There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: #222;
      }

     </style>
  <link rel="stylesheet" href="style.css" type="text/css">
 </head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 3.2 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
 </body>
</html>

Here is a fiddle http://jsfiddle.net/oskar/Aapn8/ of what I'm trying to achieve. I'm not to fussed with the "Bounce" effect.

But i basically want it to Draw on page load and stop at the desired Angle of the Arc Here's the Fiddle of what I've created so far.

http://jsfiddle.net/skerwin/uhVj6/

Thanks

http://codepen.io/dcdev/pen/upjDy – davidcondrey Sep 29 '14 at 08:11 — davidcondrey, Sep 29 '14 at 08:11

Loktar · Accepted Answer · 2013-03-28T22:34:15.983

20

Live Demo

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();



var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 75;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 10;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }

 animate();

Basically I used the same formula from the demo link you posted. I then added an animation function that when called will update the circle until it reaches the desired ending percent.

The animation is continually called by requestAnimationFrame this is the preferred way of doing any kind of animations with canvas. Every time animate is called the current percent is increased by one, which is then used to redraw the arc.

edited Mar 28 '13 at 22:34

answered Mar 28 '13 at 22:24

Loktar

34,764
7
90
104

Thanks, that you've made it ... I have some problems with my browser :-[ – metalwings Mar 28 '13 at 22:31
Your live Demo doesn't seem to have any update? It looks the same – BigOrinj Mar 28 '13 at 22:31
He forgot to add the animate function – metalwings Mar 28 '13 at 22:33
I guess because I'm on my iPhone and not on my IMac that its bit working. Ill take a look shortly – BigOrinj Mar 28 '13 at 22:36
@Blackline I added the requestAnimationFrame shim, might be why it wasnt working. Try http://jsfiddle.net/loktar/uhVj6/4/ and it should work even on there. – Loktar Mar 28 '13 at 22:37
Work's Amazing. I'm really happy. Really. With a bit of tweaking i've got it exactly how I want it. What i want to know is. How do i use the .js to have multiple canvas on one page. Say i wanted 3 or 4 of these Circles all in a line that Animate at the same time. – BigOrinj Mar 29 '13 at 08:30
@Loktar is there a simple way to also have it go from 100% to 0% without much alteration of the code? – Sir Oct 16 '15 at 01:35
how do i add text percentage to this circle – usr30911 Oct 28 '15 at 09:29

score 0 · Answer 2 · answered Mar 28 '13 at 21:35

0

Three steps:

1) Make an "init" function which will assign the variables (they aren't in any   
function).  
2) Then use requestAnimationFrame, or setInterval with your   
drawing function you will create.  
3) In this "drawing/updating" function you're going to   
write your code to do the maths and then just animate the updated circle.

There aren't any functions in your code. If you don't know how to make functions and use them + what is global variable it's better to read first a tutorials about that but anyway I'll try to make you an example :)

answered Mar 28 '13 at 21:35

metalwings

163
3
14

OK. if you could help me with some sort of fiddle that'd be great. I'm a HTML/CSS developer just stepping into Canvas. I vaguely know of functions (from PHP). – BigOrinj Mar 28 '13 at 21:45
Ok, will make fiddle when I'm done :) Hmm... I don't know very good PHP but I think it's so-so equally. The canvas uses JavaScript and jQuery (which is like JavaScript)... I hope I'm done in 30 minutes :) – metalwings Mar 28 '13 at 21:53
I tried making a constructor with the jsfiddle code.. Can someone explain why this is not working http://jsfiddle.net/uhVj6/2803/ – Sep 21 '16 at 12:53

Animate a Canvas circle to draw on load

2 Answers2

Linked