Canvas fill circle animation

Question

Basically, I want to be able to fill a circle using a canvas, but it enlivens a certain percentage. I have only a circle filling 80% of the way.

Knowing my canvas is not surprising, here is the image I made in Photoshop to display what I want.

I want the circle to start empty, and then fill up to 70% of the circle. Is this possible with Canvas, if so? can anyone shed some light on how to do this?

Here is the fiddle of what I managed

http://jsfiddle.net/6Vm67/

var canvas = document.getElementById('Circle'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 80; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = '#13a8a4'; context.fill(); context.lineWidth = 10; context.strokeStyle = '#ffffff'; context.stroke(); 

Any help would be appreciated by weight.

Answer 1

Trimming areas make this very easy. All you have to do is make a circular clipping region and then fill in a rectangle of some size to get a "partial circle" to fill. Here is an example:

 var canvas = document.getElementById('Circle'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 80; var full = radius*2; var amount = 0; var amountToIncrease = 10; function draw() { context.save(); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.clip(); // Make a clipping region out of this path // instead of filling the arc, we fill a variable-sized rectangle // that is clipped to the arc context.fillStyle = '#13a8a4'; // We want the rectangle to get progressively taller starting from the bottom // There are two ways to do this: // 1. Change the Y value and height every time // 2. Using a negative height // I'm lazy, so we're going with 2 context.fillRect(centerX - radius, centerY + radius, radius * 2, -amount); context.restore(); // reset clipping region context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.lineWidth = 10; context.strokeStyle = '#000000'; context.stroke(); // Every time, raise amount by some value: amount += amountToIncrease; if (amount > full) amount = 0; // restart } draw(); // Every second we'll fill more; setInterval(draw, 1000); 

http://jsfiddle.net/simonsarris/pby9r/

Answer 2

This is a slightly more dynamic object-oriented version, so you can adjust the parameters like circle radius, border width, color, duration and animation step, you can also animate a circle up to a certain percentage. It was very funny to write it.

 <canvas id="Circle" width="300" height="300"></canvas> <script> function Animation( opt ) { var context = opt.canvas.getContext("2d"); var handle = 0; var current = 0; var percent = 0; this.start = function( percentage ) { percent = percentage; // start the interval handle = setInterval( draw, opt.interval ); } // fill the background color context.fillStyle = opt.backcolor; context.fillRect( 0, 0, opt.width, opt.height ); // draw a circle context.arc( opt.width / 2, opt.height / 2, opt.radius, 0, 2 * Math.PI, false ); context.lineWidth = opt.linewidth; context.strokeStyle = opt.circlecolor; context.stroke(); function draw() { // make a circular clipping region context.beginPath(); context.arc( opt.width / 2, opt.height / 2, opt.radius-(opt.linewidth/2), 0, 2 * Math.PI, false ); context.clip(); // draw the current rectangle var height = ((100-current)*opt.radius*2)/100 + (opt.height-(opt.radius*2))/2; context.fillStyle = opt.fillcolor; context.fillRect( 0, height, opt.width, opt.radius*2 ); // clear the interval when the animation is over if ( current < percent ) current+=opt.step; else clearInterval(handle); } } // create the new object, add options, and start the animation with desired percentage var canvas = document.getElementById("Circle"); new Animation({ 'canvas': canvas, 'width': canvas.width, 'height': canvas.height, 'radius': 100, 'linewidth': 10, 'interval': 20, 'step': 1, 'backcolor': '#666', 'circlecolor': '#fff', 'fillcolor': '#339999' }).start( 70 ); </script>