Animuj koło wypełnienia za pomocą płótna

Question

Zasadniczo chcę mieć możliwość wypełnienia okręgu za pomocą płótna, ale jest ono animowane do określonego procentu. Ja tylko mam okrąg wypełnić 80% drogi.

Moja wiedza na płótnie nie jest niesamowita. Oto obraz, który wykonałem w Photoshopie, aby wyświetlić to, co chcę.

chcę zacząć pusty okrąg, a następnie napełnić powiedzieć 70% okręgu. Czy jest to możliwe w przypadku Canvas? czy ktoś może rzucić trochę światła na to, jak to zrobić?

Oto skrzypce, co udało mi

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

Wszelkie pomoc byłaby znacznie ceniona

Answer 1

Clipping regiony zrobić to bardzo proste. Wszystko, co musisz zrobić, to zrobić okrągły obszar przycinania, a następnie wypełnić prostokąt o pewnym rozmiarze, aby uzyskać wartość wypełnienia "częściowego koła". Oto przykład:

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

To jest trochę bardziej dynamiczna wersja obiektowego, więc można skonfigurować opcje jak promień okręgu, szerokość obramowania, kolory, długości i krok animacji, możesz także animować okrąg do określonego procentu. Napisanie tego było całkiem zabawne.

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