canvas计时小案例

前段时间看到某QQ群里有问这个效果怎么写，一时兴趣也研究了一下，写个小例子；效果基本实现了，代码也不是很完善，如实际操作还需更改；留着以后备用。

效果图

1.gif

css 代码

div {
            margin: 0 auto;
            margin-top: 100px;
            background: #eee;
            width: 500px;
            height: 500px;
            text-align: center
        }
        
        canvas {
            margin: 0 auto;
            margin-top: 50px;
            background: #143367;
        }

html代码

 <div>
        <canvas id="canvas"></canvas>
    </div>

js代码

  var drawFunc = setInterval("draw()", 500);
        var canvas = document.getElementById("canvas");
        canvas.height = "400";
        canvas.width = "400";
        var context = canvas.getContext("2d");
        // 圆心坐标
        var circle_x = 200,
            circle_y = 200;
        // 半径
        var circle_r = 125;
        //加载次数
        var i = 0;
        //弧度
        var team_x = 0,
            team_y = 0;

        function draw() {
            context.clearRect(0, 0, 400, 400); //清除画布
            context.beginPath();
            var grad = context.createRadialGradient(circle_x, circle_y, 10, circle_x, circle_y, 110);
            grad.addColorStop(0, 'transparent');
            grad.addColorStop(1, '#1b70a7');
            // circle_r-5内圆半径
            context.arc(circle_x, circle_y, circle_r - 5, 0, 2 * Math.PI, true);
            context.fillStyle = grad; //填充渐变
            context.fill();
            //添加字体
            context.font = "normal 76px 黑体";
            context.fillStyle = "#8de9ff";
            context.fillText("开始", 126, 220, 200);
            context.closePath();
            //添加小圆
            seating(canvas.getContext('2d'))


        }

        function drawEnd() {
            context.clearRect(0, 0, 400, 400);
            context.beginPath();
            var grad = context.createRadialGradient(200, 200, 10, 200, 200, 110);
            grad.addColorStop(0, 'transparent');
            grad.addColorStop(1, '#1b70a7');
            context.fillStyle = "#49c7e9";
            context.arc(200, 200, 120, 0, 2 * Math.PI, true);
            context.fillStyle = grad;
            context.fill();
            context.font = "normal 76px 黑体";
            context.fillStyle = "#8de9ff";
            context.fillText("结束", 126, 220, 200);
            context.closePath();
            //小圆
            var angle = 180 / 360; //角度
            var team_r = 10; //设置小圆半径

            team_x = circle_x + Math.sin(changeRadian(360)) * circle_r; //角度转弧度
            team_y = circle_y - Math.cos(changeRadian(360)) * circle_r;
            //画弧线start
            context.beginPath();
            context.arc(200, 200, 125, 0, 360, false);
            context.lineWidth = 10;
            context.strokeStyle = '#49c7e9';
            context.stroke();
            context.closePath();
            //画弧线结束
            context.beginPath();
            context.arc(team_x, team_y, team_r, 0, 2 * Math.PI);
            context.stroke();
            context.fill();
            context.closePath();

        }

        function seating(cxt) {

            var angle = 180 / i; //角度
            var team_r = 10; //设置小圆半径

            team_x = circle_x + Math.sin(changeRadian(i)) * circle_r; //角度转弧度
            team_y = circle_y - Math.cos(changeRadian(i)) * circle_r;
            //画弧线start
            cxt.beginPath();
            context.arc(200, 200, 125, -1 * Math.PI / 2, -1 * Math.PI / 2 + Math.PI * i / 180, false);
            context.lineWidth = 10;
            context.strokeStyle = '#49c7e9';
            context.stroke();
            cxt.closePath();
            //画弧线结束
            cxt.beginPath();
            cxt.arc(team_x, team_y, team_r, 0, 2 * Math.PI);
            cxt.stroke();
            cxt.fill();
            cxt.closePath();
            i += 10;
            if (i > 360) {
                //画完结束提示结束
                drawEnd();
                clearInterval(drawFunc);
            }
        }

        //角度转换为弧度
        function changeRadian(angle) {
            return Math.PI / 180 * angle;
        }

本文为原创文章，如转载请表明原作者。（欢迎随时学习和指导，谢谢！）