Javascript 画布-弧形突然消失

所以我制作了一个基本的时钟，只是为了好玩，用分弧和秒弧。但是，在新的一分钟开始后，分钟弧很快从画布上消失。为什么?

这里有一个JSFiddle：

HTML

JS

var canvas=document.getElementById（'clock'）；
var context=canvas.getContext（'2d'）；
函数setDimensions（）{
context.canvas.width=window.innerWidth*0.69；
context.canvas.height=window.innerHeight；
}
设置维度（）；
var x=0.5*canvas.width；
变量y=画布高度/2；
变量半径=0.25*context.canvas.width；
var-startAngle=0；
var endAngle=2*Math.PI；
var startAnimationMinuteDone=false；
var firstTime=假；
函数updateMinute（开始、结束）{
if（startAnimationMinuteDone==false&&firstTime==false）{
clearRect（0，0，canvas.width，canvas.height）；
}
设置维度（）；
context.beginPath（）；
context.strokeStyle=“#FF7519”；
弧（x，y，半径，起点，终点）；
context.lineWidth=20；
stroke（）；
closePath（）；
}
函数updateSecond（开始、结束）{
context.beginPath（）；
context.strokeStyle=“#FFA319”；
半径=0.25*context.canvas.width+20；
弧（x，y，半径，起点，终点）；
stroke（）；
closePath（）；
}
功能细节（开始、结束）{
clearRect（0，0，canvas.width，canvas.height）；
设置维度（）；
context.beginPath（）；
context.strokeStyle=“#1A4978”；
弧（x，y，半径，起点，终点）；
context.lineWidth=20；
stroke（）；
closePath（）；
}
函数secondAntialias（开始、结束）{
context.beginPath（）；
context.strokeStyle=“#1A4978”；
半径=0.25*context.canvas.width+40；
弧（x，y，半径，起点，终点）；
stroke（）；
closePath（）；
}
$（文档）.ready（函数（）{
var时间=0；
var计数=0；
功能时钟（）{
变量日期=新日期（）；
var year=date.getFullYear（）；
var month=date.getMonth（）；
var day=date.getDay（）；
var hour=date.getHours（）；
如果（小时>12）{
小时-=12；
}
var minute=date.getMinutes（）；
var second=date.getSeconds（）；
var newestminutesart=（时间+1.5）*Math.PI；
var newestSecondStart=（时间+1.5）*Math.PI；
var缓存时间；
如果（count这就是我所说的使用不同半径的分弧和秒弧的意思，在本例中，显示当前时间的间隔是1秒，而不是消耗大量cpu的10毫秒。我会将动画和时间彼此分开：

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var width = can.width;
var height = can.height;

// because arc start at an angle of 0 rad or 0 deg you have to rotate/translate the canvas so that they start at an angle of PI/2 rad or 90 deg
ctx.rotate(-degtorad(90));
ctx.translate(-width,0);

var x = width*0.5;
var y = height*0.5;

var minradius = width*0.45;
var secradius = width*0.25;

function degtorad(deg){ return deg*(Math.PI/180); }

function updateMinute(start, end) {
    ctx.beginPath();
    ctx.strokeStyle = "#FFA319";
    ctx.arc(x, y, minradius, start, end);
    ctx.stroke();
    ctx.closePath();
}

function updateSecond(start, end) {
    ctx.beginPath();
    ctx.strokeStyle = "#1A4978";
    ctx.arc(x, y, secradius, start, end);
    ctx.stroke();
    ctx.closePath();
}

setInterval(function(){

    var date = new Date();
    var min = date.getMinutes();
    var sec = date.getSeconds();

    var secdeg = sec*6;
    var mindeg = min*6;

    console.log('secdeg: ',secdeg, sec);
    console.log('mindeg: ',mindeg, min);

    ctx.clearRect(0, 0, width,height);

    updateMinute(0,degtorad(mindeg));
    updateSecond(0,degtorad(secdeg));


},1000);

HTML:

分弧实际上不会消失，但第二个弧在经过一秒后会超过分弧，因为第二个半径等于分弧半径。更改分弧和第二个弧的半径，您就会看到它。您可以使用两个弧的不同半径。顺便说一句，漂亮的时钟；）
body,
html {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: Josefin Sans, Helvetica, sans-serif;
    background: #1A4978;
}

    var canvas = document.getElementById('clock');
    var context = canvas.getContext('2d');

    function setDimensions() {
        context.canvas.width = window.innerWidth * 0.69;
        context.canvas.height = window.innerHeight;
    }

    setDimensions();

    var x = 0.5 * canvas.width;
    var y = canvas.height / 2;
    var radius = 0.25 * context.canvas.width;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    var startAnimationMinuteDone = false;
    var firstTime = false;

    function updateMinute(start, end) {
        if (startAnimationMinuteDone == false && firstTime == false) {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

        setDimensions();
        context.beginPath();
        context.strokeStyle = "#FF7519";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function updateSecond(start, end) {
        context.beginPath();
        context.strokeStyle = "#FFA319";
        radius = 0.25 * context.canvas.width + 20;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    function minuteAntialias(start, end) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        setDimensions();
        context.beginPath();
        context.strokeStyle = "#1A4978";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function secondAntialias(start, end) {
        context.beginPath();
        context.strokeStyle = "#1A4978";
        radius = 0.25 * context.canvas.width + 40;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    $(document).ready(function() {
        var time = 0;
        var count = 0;

        function clock() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDay();
            var hour = date.getHours();

            if (hour > 12) {
                hour -= 12;
            }

            var minute = date.getMinutes();
            var second = date.getSeconds();

            var newestMinuteStart = (time + 1.5) * Math.PI;
            var newestSecondStart = (time + 1.5) * Math.PI;

            var cachedTime;

            if (count <= minute / 30 && !startAnimationMinuteDone) {
                time += 0.01;
                updateMinute(1.5 * Math.PI, (time + 1.5) * Math.PI);
                count += 0.01;
                cachedTime = time;

            } else if (!startAnimationMinuteDone) {
                time = 0;
                count = 0;
                startAnimationMinuteDone = true;

            } else if (count <= second / 30 || second == 0 && startAnimationMinuteDone) {
                time += 0.01;
                updateSecond(1.5 * Math.PI, (time + 1.5) * Math.PI);
                secondAntialias(0, 2 * Math.PI); // Arc matching background colour gives the effect of greater sharpness
                count += 0.01;

                if (second == 0) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    startAnimationMinuteDone = false;
                    firstTime = true;
                    time = 0;
                    count = 0;
                }

                console.log(second);
                console.log(startAnimationMinuteDone);
            }
        }

        setInterval(clock, 10);
    });

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var width = can.width;
var height = can.height;

// because arc start at an angle of 0 rad or 0 deg you have to rotate/translate the canvas so that they start at an angle of PI/2 rad or 90 deg
ctx.rotate(-degtorad(90));
ctx.translate(-width,0);

var x = width*0.5;
var y = height*0.5;

var minradius = width*0.45;
var secradius = width*0.25;

function degtorad(deg){ return deg*(Math.PI/180); }

function updateMinute(start, end) {
    ctx.beginPath();
    ctx.strokeStyle = "#FFA319";
    ctx.arc(x, y, minradius, start, end);
    ctx.stroke();
    ctx.closePath();
}

function updateSecond(start, end) {
    ctx.beginPath();
    ctx.strokeStyle = "#1A4978";
    ctx.arc(x, y, secradius, start, end);
    ctx.stroke();
    ctx.closePath();
}

setInterval(function(){

    var date = new Date();
    var min = date.getMinutes();
    var sec = date.getSeconds();

    var secdeg = sec*6;
    var mindeg = min*6;

    console.log('secdeg: ',secdeg, sec);
    console.log('mindeg: ',mindeg, min);

    ctx.clearRect(0, 0, width,height);

    updateMinute(0,degtorad(mindeg));
    updateSecond(0,degtorad(secdeg));


},1000);

<canvas id="canvas" width="300" height="300"></canvas>