キャンバス - 描画時間

Question

時間をキャンバスに描画しますが、時間が変わると再び描画されます。 私はキャンバスを消去することを考えていましたが、他のものもあります。

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

ヘルプがありますか？ありがとう！

Answer 1

クリーンキャンバス全体をワイプする必要が、代わりに新しい時間が

context.clearRect（X、Y、幅、高さ）描画されるキャンバスの一部のみをクリアするclearRect()を使用します。ここで

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

Answer 2

はあなたのコードビットを変更することができる方法です。実際に何かを再描画することは決してありません。別のものの上に数字を描くだけです。あなたはあなたのコードを実行させる場合、数字がお互いの上にスタックすることに気付くでしょう。

clearRectを使用する場合は、希望のピクセルサイズで定義されたキャンバスの一部を再描画できます。この例のスニペットを実行し、表示されます、時間だけが再描画されます

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

使用clearRectは、キャンバスの一部だけをクリアするために（それ以外の矩形が消えてしまいます）。以下の例では、表示されるテキストの正確な幅を取得するためにmeasureTextを使用しています。 私は、クリアされた領域の高さをハードコーディングしていますが、それは高さを得ることは可能ですが、it is complicatedです。

N.B.私はフィードバックを素早く得るために、ディスプレイに秒を追加しました。

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>