1

lo que sucede es que obtengo la hora en una función y la actualizo cada 1 segundo con un setInterval, y la dibujo en un canvas con fillText.

El problema es que la hora anterior no se borra , osea 2:50:30 se ve encima de 2:50:29 , por favor ejecutar el snippet.

Qué debo hacer para eliminar el anterior?

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
setInterval(hora, 1000);

function hora() {
  
  f = new Date();
                h = f.getHours();
                m = f.getMinutes();
                s = f.getSeconds();
                
                if(h < 10) h = "0" + h;
                else h = h;
                if(m < 10) m = "0" + m;
                else m = m;
                if(s < 10) s = "0" + s;
                else s = s;
                horafinal = h + ":" + m + ":" + s;
                console.log(horafinal);
                ctx.fillStyle = "#111";
                ctx.font="20px Monospace";
                ctx.fillText(horafinal, 0,20);
  
  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas width="100%" height="100%" id="canvas"></canvas>
</body>
</html>

0

2 respuestas 2

1

Una solución simple es rellenar el canvas con el mismo color del background en cada llamada a la función, de esta manera pinta sobre el color del canvas como si hubiese sido borrado.

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
setInterval(hora, 1000);

function hora() {
  
  f = new Date();
                h = f.getHours();
                m = f.getMinutes();
                s = f.getSeconds();
                
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0,0,c.width,c.height);
                if(h < 10) h = "0" + h;
                else h = h;
                if(m < 10) m = "0" + m;
                else m = m;
                if(s < 10) s = "0" + s;
                else s = s;
                horafinal = h + ":" + m + ":" + s;
                console.log(horafinal);
                ctx.fillStyle = "#111";
                ctx.font="20px Monospace";
                ctx.fillText(horafinal, 0,20);

}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas width="100%" height="100%" id="canvas"></canvas>
</body>
</html>

1

Una solución seria usar clearRect()

El método CanvasRenderingContext2D.clearRect() de la API de Canvas 2D establece todos los píxeles en el rectángulo definido por el punto de inicio (x, y) y el tamaño (ancho, altura) en negro transparente, borrando cualquier contenido previamente dibujado.

Sintaxis

void ctx.clearRect(x, y, width, height);

Ejemplo:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
setInterval(hora, 1000);

function hora() {

  var f = new Date(),
  h = f.getHours(),
  m = f.getMinutes(),
  s = f.getSeconds();

  if (h < 10) h = "0" + h;
  else h = h;
  if (m < 10) m = "0" + m;
  else m = m;
  if (s < 10) s = "0" + s;
  else s = s;
  var horafinal = h + ":" + m + ":" + s;
  console.log(horafinal);
  
  // Limpiamos el canvas antes de volver a dibujar
  ctx.clearRect(0, 0, ctx.canvas.offsetWidth, ctx.canvas.offsetHeight);
  
  ctx.fillStyle = "#111";
  ctx.font = "20px Monospace";
  ctx.fillText(horafinal, 0, 20);

}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <canvas width="100%" height="100%" id="canvas"></canvas>
</body>

</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.