Javascript-форум - Рекурсия в функции draw,Анимация

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Рекурсия в функции draw,Анимация (https://javascript.ru/forum/misc/79209-rekursiya-v-funkcii-draw-animaciya.html)

Рекурсия в функции draw,Анимация

Нужно дописать код, чтобы двоеточие в часах мигало, а время менялось без перезагрузки страницы.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
      
	<canvas id ="ctx"></canvas>
	<script>
		window.onload = init;
		var ctx, canvas;
		
		function init() {
		 canvas = document.getElementById("ctx");
		 ctx = canvas.getContext("2d");
			setTimeout(draw,500);
		}
		
		function draw() {
              // Переменые
       
                let date = new Date();
                let hours = date.getHours();
                let minutes = date.getMinutes();     
              // Ведущий ноль, проверки и условия
              
              
       
              
      if (minutes <= 9){
            
            minutes = "0" + minutes;
      }
      if (hours <= 9 ) {
            
            hours = "0" + hours;
      }
       
              
              // Рисование
            
			 ctx.fillStyle = "Turquoise";
               ctx.strokeStyle = "SteelBlue";
			 ctx.strokeRect(10,10,250,156);
			ctx.lineWidth = 5;
			ctx.fillRect(10,10,250,150);
			
			
			//  Цифры
              ctx.fillStyle = "white"
			ctx.font = "5em serif ";
              
              
	     	ctx.fillText(hours,25,100); 
             ctx.fillText(":", 120, 100);
			ctx.fillText(minutes,155,100); 
              
              
			
              
            
		}
          
          
          
  
   
         
      
	
	
	</script>
	
</body>
</html>

Fillbill,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <canvas id ="ctx"></canvas>
    <script>
        window.onload = init;
        var ctx, canvas;
        function init() {
         canvas = document.getElementById("ctx");
         ctx = canvas.getContext("2d");
            setTimeout(draw,500);
        }
        function draw() {
              // Переменые
                let date = new Date();
                let hours = date.getHours();
                let minutes = date.getMinutes();
              // Ведущий ноль, проверки и условия
                let seconds = date.getSeconds();
      if (minutes <= 9){
            minutes = "0" + minutes;
      }
      if (hours <= 9 ) {
            hours = "0" + hours;
      }
              // Рисование
            ctx.fillStyle = "Turquoise";
            ctx.strokeStyle = "SteelBlue";
            ctx.lineWidth = 5;
            ctx.strokeRect(10,10,250,130);
            ctx.fillRect(13,13,244,124);
            //  Цифры
            ctx.fillStyle = "white"
            ctx.font = "5em serif ";
         	ctx.fillText(hours,30,100);
            ctx.fillText(seconds % 2 ? ":" : " ", 125, 93);
            ctx.fillText(minutes,160,100);
            setTimeout(draw,500);
        }
    </script>
</body>
</html>

Cпасибо большое!
А можно ли как-то сделать это с помощью очистки холста?
( сtx.clearRect(), ctx.save() и ctx.restore() )

Цитата:

Сообщение от Fillbill

А можно ли как-то сделать это с помощью очистки холста?

не знаю.

Fillbill,
:-?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <canvas id ="ctx"></canvas>
    <script>
        window.onload = init;
        var ctx, canvas;
        function init() {
         canvas = document.getElementById("ctx");
         ctx = canvas.getContext("2d");
         ctx.fillStyle = "Turquoise";
         ctx.strokeStyle = "SteelBlue";
         ctx.lineWidth = 5;
         ctx.font = "5em serif ";
         ctx.save();
         draw();
        }
        function draw() {
              // Переменые
                let date = new Date();
                let hours = date.getHours();
                let minutes = date.getMinutes();
              // Ведущий ноль, проверки и условия
                let seconds = date.getSeconds();
      if (minutes <= 9){
            minutes = "0" + minutes;
      }
      if (hours <= 9 ) {
            hours = "0" + hours;
      }
              // Рисование
            ctx.restore();
            ctx.strokeRect(10,10,250,130);
            ctx.fillRect(13,13,244,124);
            ctx.save();
            ctx.fillStyle = "white";
            ctx.fillText(hours,30,100);
            ctx.fillText(seconds % 2 ? ":" : " ", 125, 93);
            ctx.fillText(minutes,160,100);
           setTimeout(draw,500);
        }
    </script>
</body>
</html>