Анимация заливающего круга с использованием холста

Question

В основном я хочу, чтобы иметь возможность заполнить круг, используя холст, но он оживляет определенный процент. I.e только круг заполняет 80% пути.

Знание моего холста не удивительно, вот изображение, которое я сделал в фотошопе, чтобы отобразить то, что я хочу.

Я хочу круг, чтобы начать пустой, а затем заполнить, чтобы сказать 70% окружности. Возможно ли это с Canvas, если да? может ли кто-нибудь пролить свет на то, как это сделать?

Вот скрипку, что мне удалось

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

Любая помощь будет массово оценили

Answer 1

Отсечение регионы сделать это очень легко. Все, что вам нужно сделать, это сделать круговую область отсечения, а затем заполнить прямоугольник некоторого размера, чтобы получить «частичный круг» для заполнения. Вот пример:

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

Это немного более динамичная, объектно-ориентированная версия, поэтому вы можете настроить параметры, как радиус окружности, ширину границы, цвет, длительность и стадия анимации, вы также можете анимировать круг до определенного процента. Было очень забавно это написать.

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