キャンバスの間隔を設定して、繰り返し時計の針を外します

Question

私はキャンバスで新しいです。私は自分の時計に問題があります。 sethandval（）関数がsetIntervalによって呼び出されるたびに、clock handsは前に進んでいますが、前の手は削除されません。私は時計を繰り返して手を取り除きたい。 時計のイメージでは、私が欲しいものが見えます。長い手だけでなく、他の2本の手も繰り返す。 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

キャンバスについて覚えておくべき1つの基本的な事があります - あなたはすでに描いたものを「削除」することはできません。だから、それらの "繰り返し"を避けるためには、すべてのキャンバスをクリアして、すべてを再描画しなければなりません。少なくとも、一部のclockFaceをカバーする必要があります。あなたのケースでは

、それはそのようなものでなければなりません：変更された唯一のものである

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); 
} 

「時計の文字盤（文脈）;」絵を描く前に時計の表面を白く塗り、塗装する。

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>

あなたはクリアして再描画する必要があるので、そのは、キャンバスで毎回描きます。

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