zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    bus总线
    vue 动态组件、父子组件传参
    echarts
    记录板
    留言板
    如何移除双系统mac中的windows系统
    Kernel,Shell,Bash 的关系
    zju 校队选拔 被虐记
    COGS 2638. 数列操作ψ 线段树
    退役公告【现已复活】
  • 原文地址:https://www.cnblogs.com/tingting4133/p/4106458.html
Copyright © 2011-2022 走看看