Login/Register
Animate a Canvas circle to draw on load
Asked Answered
Solved canvasjquery-animatedrawradial
W

2

6

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

Whitted answered 28/3, 2013 at 21:17 Comment(1)
codepen.io/dcdev/pen/upjDy – Phyllys
G
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.

Galton answered 28/3, 2013 at 22:24 Comment(8)
Thanks, that you've made it ... I have some problems with my browser :-[ – Magnificence
Your live Demo doesn't seem to have any update? It looks the same – Whitted
He forgot to add the animate function – Magnificence
I guess because I'm on my iPhone and not on my IMac that its bit working. Ill take a look shortly – Whitted
@Blackline I added the requestAnimationFrame shim, might be why it wasnt working. Try jsfiddle.net/loktar/uhVj6/4 and it should work even on there. – Galton
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. – Whitted
@Galton is there a simple way to also have it go from 100% to 0% without much alteration of the code? – Supination
how do i add text percentage to this circle – Chow
M
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 :)

Magnificence answered 28/3, 2013 at 21:35 Comment(3)
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). – Whitted
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 :) – Magnificence
I tried making a constructor with the jsfiddle code.. Can someone explain why this is not working jsfiddle.net/uhVj6/2803 – Restaurant

© 2022 - 2024 — McMap. All rights reserved.