首页 > 代码库 > canvas 画圆饼动画 countdown 倒计时

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 = 1000,        n = 10; // 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);

 

canvas 画圆饼动画 countdown 倒计时