使用画布动画像饼图一样填充圆形

Question

基本上我希望能够使用画布填充圆形，但它像饼图和蒙版一样动画，以便在圆圈中显示新图像。 我的画布知识并不奇妙，这是一张图片来展示我想要的东西。 任何人都会谈到如何做到这一点？ 这里是我所管理

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 = 0.1; 
     function draw() { 
     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, amount * Math.PI, false); 
     context.fillStyle = '#13a8a4'; 
     context.fill(); 
     context.lineWidth = 10; 
     context.strokeStyle = '#000000'; 
     context.stroke(); 
    amount += amountToIncrease; 
    if (amount > full) amount = 0; // restart 
} 
draw(); 
// Every second we'll fill more; 
setInterval(draw, 100); 

Answer 1

这是一种方式的小提琴：

1. 画出你的灰色背景。
2. 以-Math.PI * 2（==“12时钟”）和结束角度-Math.PI * 2 + Math.PI * 2 * percent（= = 2PI乘以你想要的百分比的整整一圈）。
3. 绘制您的标志。

要生成动画，只需使用循环，该循环逐渐绘制从0％开始到目标百分比的百分比弧。

实施例的代码和一个演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var nextTime=0; 
 
var duration=1000; 
 
var endingPct=75; 
 
var pct=0; 
 
var increment=duration/pct; 
 
requestAnimationFrame(animate); 
 

 
function animate(time){ 
 
    draw(pct); 
 
    pct++; 
 
    if(pct<=endingPct){requestAnimationFrame(animate);} 
 
} 
 

 
function draw(pct){ 
 
    var endRadians=-Math.PI/2+Math.PI*2*pct/100; 
 
    ctx.fillStyle='lightgray'; 
 
    ctx.fillRect(0,0,cw,ch); 
 
    ctx.beginPath(); 
 
    ctx.arc(150,125,100,-Math.PI/2,endRadians); 
 
    ctx.lineTo(150,125); 
 
    ctx.fillStyle='white'; 
 
    ctx.fill(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(150,100); 
 
    ctx.lineTo(175,150); 
 
    ctx.quadraticCurveTo(150,125,125,150); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle='#13a8a4'; 
 
    ctx.lineJoin='bevel'; 
 
    ctx.lineWidth=10; 
 
    ctx.stroke(); 
 
    ctx.fillStyle='black'; 
 
    ctx.textAlign='center'; 
 
    ctx.textBaseline='middle' 
 
    ctx.font='18px arial'; 
 
    ctx.fillText('ADUR',150,175); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

[更新：我们所需要的动画楔内截取的图像]

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var nextTime=0; 
 
var duration=1000; 
 
var endingPct=75; 
 
var pct=0; 
 
var increment=duration/pct; 
 
var cx=cw/2; 
 
var cy=ch/2; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/mm.jpg"; 
 
function start(){ 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function animate(time){ 
 
    draw(pct); 
 
    pct++; 
 
    if(pct<=endingPct){requestAnimationFrame(animate);} 
 
} 
 

 
function draw(pct){ 
 
    // 
 
    var endRadians=-Math.PI/2+Math.PI*2*pct/100; 
 
    // 
 
    ctx.fillStyle='lightgray'; 
 
    ctx.fillRect(0,0,cw,ch); 
 
    // 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,cy,100,-Math.PI/2,endRadians); 
 
    ctx.lineTo(cx,cy); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    ctx.drawImage(img,cx-img.width/2,cx-img.height/2); 
 
    ctx.restore(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>