Tạo hiệu ứng cho vòng tròn tô màu bằng cách sử dụng Canvas

Question

Về cơ bản tôi muốn có thể Tô màu vòng tròn bằng canvas, nhưng nó hoạt ảnh với một tỷ lệ nhất định. I.e chỉ có vòng tròn lấp đầy 80% đường.

Kiến thức canvas của tôi không tuyệt vời, Đây là hình ảnh tôi đã tạo trong photoshop để hiển thị những gì tôi muốn.

Tôi muốn vòng tròn để bắt đầu rỗng và sau đó Điền lên để nói 70% của vòng tròn. Điều này có thể thực hiện với Canvas, nếu có? bất cứ ai có thể làm sáng tỏ một số cách để làm điều đó?

Đây là một fiddle về những gì tôi đã quản lý

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

Bất kỳ trợ giúp sẽ được đánh giá cao ồ ạt

Answer 1

Clipping vùng làm này rất dễ dàng. Tất cả những gì bạn phải làm là tạo một vùng cắt tròn và sau đó điền vào một hình chữ nhật có kích thước nào đó để có được một giá trị "một phần vòng tròn". Dưới đây là một ví dụ:

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

Đây là một ít năng động hơn, phiên bản hướng đối tượng, vì vậy bạn có thể cấu hình các tùy chọn như bán kính vòng tròn, chiều rộng biên giới, màu sắc, thời gian và bước của hình ảnh động, bạn cũng có thể tạo hình tròn cho một tỷ lệ nhất định. Thật thú vị khi viết điều này.

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