canvas 画圆饼动画 countdown 倒计时

<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #666"></canvas>
var canvas = document.getElementById("myCanvas"),
        ctx = canvas.getContext("2d"),
        width = canvas.width,
        height = canvas.height

    function drawArc(s, e) {
        var x = width / 2, // center x  
            y = height / 2, // center y  
            radius = 100,
            counterClockwise = false;

        ctx.fillStyle = '#0e6000';
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, radius, s, e, counterClockwise);
        ctx.fill();
    }

    var step = 1,  //相当于是1弧度 = 180°/π;
        startAngle = 0,
        endAngle = 0;

    var animation_interval = 100,
        n = 60; // count of arc  把圆拆分为多少块来做动画~

    var animation = function() {
        if (step <= n) {
            endAngle = step * 2 * Math.PI / n;
            console.log("endAngle",endAngle)
            drawArc(startAngle, endAngle);
            console.log("n",n)
            console.log("step",step)
            step++;
        } else {
            clearInterval(animation);
        }
    };

    setInterval(animation, animation_interval);
原文地址:https://www.cnblogs.com/tingting4133/p/4106458.html