стереть предыдущие строки холст

Question

Я пытаюсь создать часы JavaScript, используя canvas, и у меня все включено, за исключением того, что предыдущие строки не исчезают, когда я рисую новые, я проверил предыдущий код на похожие вопросы и он не работает, вот чтоДо сих пор я хочу стереть ранее нарисованные линии на холсте, он продолжает создавать новые линии одну за другой.Спасибо

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius)
radius = radius * 0.90

setInterval(drawClock, 1000);





function drawClock() {
     drawFace(ctx, radius);
        function drawFace(ctx, radius) {        
            ctx.beginPath();
            ctx.arc(0, 0,8, 0, 2*Math.PI);
            ctx.fillStyle = '#000000';
            ctx.fill();            
        }
        function drawFont(){
            ctx.font = "30px Arial";
            ctx.fillText("12",-17,-140);
            ctx.font = "30px Arial ";
            ctx.fillText("3",140,10);
            ctx.font = "30px Arial";
            ctx.fillText("6",-17,160);
            ctx.font = "30px Arial";
            ctx.fillText("9",-160,10);
            drawFace();

         }
        function drawHands(length, width, color,ang){            
            ctx.save();
            let deg= Math.PI/180;
            ctx.rotate(ang);
            ctx.moveTo(0,0);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.lineTo(0,length);
            ctx.lineCap = 'round'; 
            ctx.stroke();
            ctx.restore();
            drawFont();   


        } 
        function getTime(){
            var now = new Date();
            var hour = now.getHours(); 
            var minute = now.getMinutes();
            var second = now.getSeconds();
            // console.log( hour+'::'+ minute + ': '+ second)

            var hours = (hour*Math.PI/6)+
                (minute*Math.PI/(6*60))+
                (second*Math.PI/(360*60));
            var minutes =   minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
            let seconds=(second*Math.PI/30);


                // drawHands(-90, 5, 'blue', hours);  
                // drawHands(-120, 4, 'red', minutes);    
                drawHands(-150, 2, 'black', seconds);


            console.log(seconds)

            ctx.putImageData(imageData, 0, 0);

        }

        getTime();
}

мой HTML

<canvas id="mycanvas" width="350px" height="350px"
                        style="border:8px inset gray; border-radius: 190px;  margin: auto;">

                        </canvas>

Answer 1

Вам нужно стирать холст каждый раз, когда вы рисуете.Лучше всего думать о HTML5 Canvas как о рисовании по одному кадру за раз .Поэтому, когда вы рисуете следующий кадр, вы должны очистить предыдущий кадр, используя clearRect():

ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height); // x, y, w, h

CodePen: https://codepen.io/chiss22/pen/wRKJON

Answer 2

Самое простое и распространенное решение - очистить весь холст и перерисовать часы на каждом шаге.

setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawClock();
}, 1000);

Другие примечания:

• Вам нужно толькоустановите шрифт один раз, прежде чем начинать заполнять текст
• Вы должны переместить drawFace, drawFont, drawHands и getTime из функции drawClock, чтобы они не создавались заново каждый раз