Geek Answers Handbook

Animate the circle of the canvas for drawing on the load

OK Hello.

I decided to start using HTML canvas for the small project that I have.

There is no real start. I am just learning the basics of Canvas and want to animate the 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 the fiddle http://jsfiddle.net/oskar/Aapn8/ of what I'm trying to achieve. I will not fuss with the "Bounce" effect.

But I basically want him to draw on the page load and stop at the desired corner of the arc. Here is a script of what I have created so far.

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

thanks

+6
source share
2 answers

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();

I basically used the same formula from the demo link you posted. Then I added an animation function that, when called, will update the circle until it reaches the desired final percentage.

The animation is constantly called by requestAnimationFrame , this is the preferred way to do any kind of animation with the canvas. Each time animate is called, the current percentage is incremented by one, which is then used to redraw the arc.

+19
source

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 are no functions in your code. If you do not know how to create functions and use them + what a global variable is, it is better to read the tutorials about it first, but in any case I will try to give you an example :)

0
source

More articles:


All Articles