clearRect mit SetInterval

Question

Unter meinen Code

var canvas, context; 
 
var canvas = document.getElementById('board'); 
 
var context = canvas.getContext('2d'); 
 

 
var hex = 50; 
 

 
function drawHex(hexGain) { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (hexGain <= 0) return; 
 
    x = canvas.width/2 - hexGain; 
 
    y = canvas.height/2; 
 
    context.moveTo(x, y); 
 
    x += hexGain/2; 
 
    y -= hexGain/2; 
 
    context.lineTo(x, y); // now render it per our style definitions 
 
    x += hexGain; 
 
    y += 0; 
 
    context.lineTo(x, y); 
 
    x += hexGain/2; 
 
    y += hexGain/2; 
 
    context.lineTo(x, y); 
 
    x -= hexGain/2; 
 
    y += hexGain/2; 
 
    context.lineTo(x, y); 
 
    x -= hexGain; 
 
    y += 0; 
 
    context.lineTo(x, y); 
 
    x -= hexGain/2; 
 
    y -= hexGain/2; 
 
    context.lineTo(x, y); 
 
    context.strokeStyle = "rgba(0,0,0,1)"; 
 
    context.stroke(); 
 
} 
 

 
window.setInterval(function() { 
 
    drawHex(hex); 
 
    hex -= 5; 
 
}, 1000);

<canvas id="board"></canvas>

Ich bin zu ziehen und Sechseck nicht in der Lage, eine Sekunde warten, die Leinwand löschen, eine kleinere ziehen und so weiter. Ich verstehe nicht, warum die clearRect nicht aufgerufen wird. Ich brauche im Grunde eine Animation eines Sechsecks, die kleine und kleine

Grüße sind,

Answer 1

Sie haben vergessen context.beginPath() zu rufen, wenn Sie mit dem Zeichnen beginnen.

Also, was passiert ist, dass die Leinwand in der Tat räumt, aber Sie fügen ein zweites Sechseck zum "Pfad" hinzu, der gezeichnet wird. Dann noch einer und noch einer.