首页 > 其他 > 详细

canvas 画圆饼动画 countdown 倒计时

时间:2014-11-18 23:36:11      阅读:268      评论:0      收藏:0      [点我收藏+]
<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 倒计时

原文:http://www.cnblogs.com/tingting4133/p/4106458.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!