Animiere einen Füllkreis mit Canvas

Question

Grundsätzlich möchte ich in der Lage sein, einen Kreis mit Leinwand zu füllen, aber es zu einem bestimmten Prozentsatz zu animieren. Ie nur den Kreis füllen 80% der Strecke.

Meine Leinwand Wissen ist nicht erstaunlich, Hier ist ein Bild, das ich in Photoshop gemacht, um anzuzeigen, was ich will.

Ich will der Kreis leer starten und dann 70% des Kreises zu sagen auffüllen. Ist dies mit Canvas möglich, wenn ja? kann jemand etwas Licht darüber werfen, wie es geht? Hier

ist eine Geige von dem, was ich

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

Jede Hilfe massiv

Answer 1

geschätzt geschafft haben würden Regionen Clipping machen dies sehr einfach. Alles, was Sie tun müssen, ist eine kreisförmige Ausschnittsregion zu erstellen und dann ein Rechteck von einiger Größe zu füllen, um einen "teilweisen Kreis" der Fülle zu erhalten. Hier ein Beispiel:

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

Dies ist ein wenig dynamische, objektorientierte Version, so dass Sie die Optionen, wie die Kreisradius konfigurieren können, Randbreite, Farben, Dauer und Schritt der Animation, Sie können den Kreis auch auf einen bestimmten Prozentsatz animieren. Es hat Spaß gemacht, das zu schreiben.

<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>