कैनवास

Question

का उपयोग कर एक भरें सर्कल को एनिमेट करें मूल रूप से मैं कैनवास का उपयोग करके एक मंडल भरने में सक्षम होना चाहता हूं, लेकिन यह एक निश्चित प्रतिशत को एनिमेट करता है। आईई में केवल सर्कल 80% तक भर गया है।

मेरा कैनवास ज्ञान अद्भुत नहीं है, यहां एक छवि है जिसे मैंने फ़ोटोशॉप में बनाया है जो मैं चाहता हूं।

मैं चक्र खाली शुरू हुई और फिर चक्र के 70% का कहना है कि अप करने के लिए भरें करना चाहते हैं। क्या यह कैनवास के साथ संभव है, यदि ऐसा है? क्या कोई इसे कैसे कर सकता है इस पर कुछ प्रकाश डाल सकता है?

यहाँ मैं क्या प्रबंधित किया है

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>