JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

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

JavaScript

var ANIMACION={
    lineal: function(porcentaje) {  return porcentaje },
    easeIn: function(porcentaje) { return Math.pow(porcentaje,2); },
    easeOut: function(porcentaje) { return 1-Math.pow(1-porcentaje,2); },
    easeInOut: function(porcentaje) { return -Math.cos(porcentaje*Math.PI)/2 + 0.5; },
    bounceEaseOut: function (porcentaje) {
        var res=0;
        if (porcentaje<1/2.75)
        {
            return 7.5625*porcentaje*porcentaje;
        }
        else if (porcentaje<2/2.75)
        {
            return 7.5625*(porcentaje-1.5/2.75)*(porcentaje-1.5/2.75)+0.75;
        }
        else if (porcentaje<2.5/2.75)
        {
            return 7.5625*(porcentaje-2.25/2.75)*(porcentaje-2.25/2.75)+0.9375;
        }
        else
        {
            return 7.5625*(porcentaje-2.625/2.75)*(porcentaje-2.625/2.75)+0.984375;
        }
    }
};
function GraficaRedonda(canvas,datos, colores){
    this.canvas=canvas;
    this.ctx=canvas.getContext("2d");
    this.datos=datos;
    this.colores=colores;
    
    this.centro=[this.canvas.width/2, this.canvas.height/2];
    this.radio=Math.min(this.centro[0],this.centro[1]);
    this.total=this.datos.reduce(function(a,b){ return a+b; });
}
GraficaRedonda.prototype.dibujarPorcentaje=function(porcentaje){
    var nColores=this.colores.length;
    var anterior=0;
    this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
    for (var i=0, n=this.datos.length;i<n; i++)
    {   
        var proxima=anterior+Math.PI*2*(this.datos[i]*porcentaje/this.total);
        this.ctx.fillStyle = this.colores[i%nColores];
        this.ctx.beginPath();
        this.ctx.moveTo(this.centro[0],this.centro[1]);
        this.ctx.arc(this.centro[0],this.centro[1],this.radio,anterior,proxima,false);
        this.ctx.lineTo(this.centro[0],this.centro[1]);
        this.ctx.fill();
        anterior=proxima;
    }
};
GraficaRedonda.prototype.dibujar=function(tiempo){
    var actual=0.01;
    var self=this;
    var dibujar=(function...