Canvas - Draw Time

Question

Ich zeichne Zeit auf einer Leinwand, aber wenn sich die Zeit ändert, zeichnet sie es erneut. Ich dachte über das Löschen der Leinwand nach, aber ich habe andere Dinge darauf.

function startTime() { 
    var today = new Date(); 
    var h = today.getHours(); 
    var m = today.getMinutes(); 
    var s = today.getSeconds(); 

    m = checkTime(m); 
    s = checkTime(s); 
    ctx.font="20px Arial"; 
    ctx.fillText(h + ':' + m, 4, 24); 
    var t = setTimeout(startTime, 500); 
} 

function checkTime(i) { 
    if (i < 10) {i = "0" + i}; 
    return i; 
} 

Irgendwelche Hilfe? Vielen Dank!

Answer 1

Keine Notwendigkeit, die gesamte Leinwand zu reinigen, anstatt clearRect() verwenden Sie nur den Teil der Leinwand zu löschen, wo neue Zeit

gezeichnet werden soll

context.clearRect (x, y, Breite, Höhe);

ctx.clearRect(4,24,100,50); // clear old time 
ctx.font="20px Arial"; 
ctx.fillText(h + ':' + m, 4, 24); //draw new time 

Answer 2

Hier ist, wie Sie Ihren Code ein wenig ändern können. Beachten Sie, dass Sie nie etwas neu zeichnen, sondern einfach eine Zahl auf eine andere zeichnen. Sie werden bemerken, wenn Sie Ihren Code laufen lassen, stapeln sich die Zahlen übereinander.

Wenn Sie clearRect verwenden, können Sie einen Teil des Canvas neu zeichnen, das durch die gewünschten Pixelmaße definiert ist. Führen Sie dieses Beispiel Schnipsel und Sie werden sehen, nur die Zeit neu gestrichen wird (sonst würde die Rechtecke verschwinden)

var ctx = document.getElementById('time').getContext('2d'); 
 
ctx.rect(0, 75, 25, 25) 
 
ctx.rect(75, 0, 25, 25) 
 
ctx.rect(75, 75, 25, 25) 
 
ctx.stroke() 
 

 
function startTime() { 
 
    var today = new Date(); 
 
    var h = today.getHours(); 
 
    var m = today.getMinutes(); 
 
    var s = today.getSeconds(); 
 

 
    m = checkTime(m); 
 
    s = checkTime(s); 
 
    ctx.clearRect(0, 0, 50, 30); // <- point of interest 
 
    ctx.font="20px Arial"; 
 
    ctx.fillText(h + ':' + m, 4, 24); 
 
    var t = setTimeout(startTime, 500); 
 
} 
 

 
function checkTime(i) { 
 
    if (i < 10) { 
 
    i = "0" + i; 
 
    } 
 
    return i; 
 
} 
 

 
startTime()

<canvas id='time' width="100" height="100"></canvas>

Answer 3

Verwenden clearRect löschen nur einen Teil der Leinwand. Im folgenden Beispiel habe ich measureText verwendet, um die genaue Breite des angezeigten Textes zu erhalten. Ich habe die Höhe der Fläche hart-codiert, es ist möglich, die Höhe aber it is complicated zu bekommen.

N.B. Ich habe dem Display auch Sekunden hinzugefügt, um schneller Feedback zu erhalten.

var canvas = document.getElementsByTagName('canvas')[0]; 
 
var ctx = canvas.getContext('2d'); 
 
var previousTextMetrics = null; 
 

 
startTime(); 
 

 
function startTime() { 
 
    //clear the previously displayed text 
 
    if (previousTextMetrics) { 
 
    ctx.clearRect(4, 4, previousTextMetrics.width, 20); 
 
    } 
 

 
    var today = new Date(); 
 
    var h = today.getHours(); 
 
    var m = today.getMinutes(); 
 
    var s = today.getSeconds(); 
 
    m = checkTime(m); 
 
    s = checkTime(s); 
 
    ctx.font = "20px Arial"; 
 
    var text = h + ':' + m + ':' + s; 
 
    ctx.fillText(text, 4, 24); 
 
    //read metrics, including the width of the text 
 
    previousTextMetrics = ctx.measureText(text); 
 

 
    var t = setTimeout(startTime, 500); 
 
} 
 

 
function checkTime(i) { 
 
    if (i < 10) { 
 
    i = "0" + i 
 
    }; 
 
    return i; 
 
}

<canvas></canvas>