码迷,mamicode.com
首页 > 其他好文 > 详细

canvas 画圆饼动画 countdown 倒计时

时间:2014-11-18 23:37:04      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   sp   div   on   art   

<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 倒计时

标签:style   blog   io   ar   color   sp   div   on   art   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!