Enlever les aiguilles d'horloge répétées en utilisant l'intervalle défini dans la toile

Question

Hye, je suis nouveau sur la toile. J'ai un problème avec mon horloge. A chaque appel de la fonction workinghands() par setInterval, les aiguilles de l'horloge sont en avance mais les aiguilles précédentes ne sont pas supprimées. Je veux enlever les mains répétées sur l'horloge. À l'image de l'horloge, vous verrez ce que je veux. Non seulement la longue main se répète mais aussi les deux autres mains. click the link to view image of clock

function workingHands(context) 
    { 
     var date = new Date(); 
     var second = date.getSeconds(); 
     var minute = date.getMinutes(); 
     var hour = date.getHours() % 12; 

     second = second * Math.PI/30; 
     drawHands(context, second, 125, 2); 

     second = date.getSeconds(); 

     minute = (second * Math.PI/(1800)) + (minute * Math.PI/30); 
     drawHands(context, minute, 100, 5); 

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

     hour = (second * Math.PI/(10800)) + (minute * Math.PI/1800) + (hour * Math.PI/6) 
     drawHands(context, hour, 50, 10); 
    } 
    function drawHands(context, angle, length, width) 
    { 
     context.translate(18, -7); 
     context.beginPath(); 
     context.moveTo(0, 0); 
     context.rotate(angle); 
     context.lineTo(0, -length); 
     context.lineWidth = width; 
     context.lineCap = "round"; 
     context.stroke(); 
     context.rotate(-angle); 
     context.translate(-18, 7); 
    } 
    function clockFace(context) 
    { 
     context.beginPath(); 
     context.arc(centerX, centerY, 140, 0, 2 * Math.PI); 
     context.strokeStyle = "black"; 
     context.lineWidth = "10"; 
     context.stroke(); 
     context.closePath(); 

     context.beginPath(); 
     context.arc(centerX, centerY, 5, 0, 2 * Math.PI); 
     context.fill = "black"; 
     context.stroke(); 

     context.translate(centerX, centerY); 
     decorClock(context); 
     numbers(context); 
    } 
    clockFace(context); 
    setInterval(workingHands, 1000, context); 

Answer 1

Il y a une chose fondamentale à retenir sur toile - vous ne pouvez pas quoi que ce soit « supprimer » vous avez déjà dessiné. Donc, pour éviter ces "répétitions", vous devez effacer toute la toile et tout dessiner à nouveau, ou au moins - couvrir une partie - comme clockface.

Dans votre cas, il devrait y avoir quelque chose comme ça:

function workingHands(context) 
{ 
    clockFace(context); 
    var date = new Date(); 
    var second = date.getSeconds(); 
    var minute = date.getMinutes(); 
    var hour = date.getHours() % 12; 

    second = second * Math.PI/30; 
    drawHands(context, second, 125, 2); 

    second = date.getSeconds(); 

    minute = (second * Math.PI/(1800)) + (minute * Math.PI/30); 
    drawHands(context, minute, 100, 5); 

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

    hour = (second * Math.PI/(10800)) + (minute * Math.PI/1800) + (hour * Math.PI/6) 
    drawHands(context, hour, 50, 10); 
} 

La seule chose qui a changé est « Clockface (contexte); » couvrant, peindre le cadran blanc juste avant de dessiner les mains.

Answer 2

var canvas = document.getElementById('c') 
 
var context = canvas.getContext('2d'); 
 
var centerX = canvas.width/2, 
 
    centerY = canvas.height/2; 
 

 
function workingHands() 
 
    { 
 
     context.clearRect(0, 0, canvas.width, canvas.height); 
 
     clockFace(); 
 
     var date = new Date(); 
 
     var second = date.getSeconds(); 
 
     var minute = date.getMinutes(); 
 
     var hour = date.getHours() % 12; 
 

 
     second = second * Math.PI/30; 
 
     drawHands(context, second, 125, 2); 
 

 
     second = date.getSeconds(); 
 

 
     minute = (second * Math.PI/(1800)) + (minute * Math.PI/30); 
 
     drawHands(context, minute, 100, 5); 
 

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

 
     hour = (second * Math.PI/(10800)) + (minute * Math.PI/1800) + (hour * Math.PI/6) 
 
     drawHands(context, hour, 50, 10); 
 
    } 
 
    function drawHands(context, angle, length, width) 
 
    { 
 
    
 
     context.save(); 
 
     context.translate(centerX, centerX); 
 
     context.beginPath(); 
 
     context.moveTo(0, 0); 
 
     context.rotate(angle); 
 
     context.lineTo(0, -length); 
 
     context.lineWidth = width; 
 
     context.lineCap = "round"; 
 
     context.stroke(); 
 
     context.closePath(); 
 
     context.restore(); 
 
    } 
 
    function clockFace() 
 
    { 
 
    
 
     context.beginPath(); 
 
     context.arc(centerX, centerY, 140, 0, 2 * Math.PI); 
 
     context.strokeStyle = "black"; 
 
     context.lineWidth = "10"; 
 
     context.stroke(); 
 
     context.closePath(); 
 

 
     context.beginPath(); 
 
     context.arc(centerX, centerY, 5, 0, 2 * Math.PI); 
 
     context.fill = "black"; 
 
     context.stroke(); 
 
     context.closePath(); 
 
    } 
 
    setInterval(workingHands, 1000);

<canvas id='c' width=400 height=400></canvas>

Son dessin chaque fois en toile, de sorte que vous devez effacer et redessiner.

context.clearRect(0, 0, canvas.width, canvas.height);