使用Canvas为饼图动画填充圆圈 [英] Animate a Fill Circle like pie chart using Canvas

问题描述

基本上我希望能够使用画布填充圆形，但它会像饼图和蒙版一样动画以在圆圈中显示新图像。
我的画布知识并不令人惊讶，这是一个显示我想要的图像。

任何人都可以了解如何做到这一点？
这是我管理的小提琴

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

推荐答案

这是一种方式：

1. 画出你的灰色背景。


2. 用起始角度填充你的百分比弧 - -Math.PI * 2（= =时钟上的12）和结束角度-Math.PI * 2 + Math.PI * 2 *％（= = 2PI乘以所需百分比的整圈）。


3. 绘制你的徽标。

要设置动画，只需使用 requestAnimationFrame 循环逐步绘制百分比弧，从0％开始，以目标百分比结束。

To animate, just use a requestAnimationFrame loop that incrementally draws the percent-arc starting at 0 percent and ending at your target percent.

示例代码和演示：

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>

这篇关于使用Canvas为饼图动画填充圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！