Reputation: 67
Basically I want to be able to Fill a Circle using canvas, but it animate like pie chart and mask to show new image in circle.
My canvas knowledge isn't amazing, Here is an image to display what i want.
an anyone shed some light on how to do it?
Here is a fiddle of what I've managed
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);
Upvotes: 1
Views: 2904
Reputation: 105035
This is one way:
To animate, just use a requestAnimationFrame
loop that incrementally draws the percent-arc starting at 0 percent and ending at your target percent.
Example code and a Demo:
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>
[Update: We needed an image clipped inside the animated wedge]
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>
Upvotes: 4