Tuval değiştirme elemanları bir süre sonra teker teker

Question

Tuvalde canlandırmalarla çalışıyorum ve düz bir sözcüğün düz metinden değiştirileceği yere gelmesini istedim. Örneğin düz siyah kelimeler çok kalın renkli harfler . Denedim Ne ...

HTML

<canvas id="ctx" height="500" width="500"> 

</canvas> 

JS

var ctx = document.getElementById("ctx"); 
var word = ['H', 'e', 'l', 'l', 'o']; 
ctx.fillText(word, 50, 50); 
for (var i = 0; i < word.length; i++) 
{ 
    ctx.font = "Comic Sans"; 
    ctx.strokeText(word, 50, 50); 
} 

Amacım birkaç saniye sonra sonra yazdırmak veya böylece bir tek değişiklik metni tarafından etmektir

Answer 1

İlk şey doğru içeriğe ihtiyacınız var. Muhtemelen bir 2D bağlamdır.

var ctx = document.getElementById("ctx").getContext("2d"); 

Bir sonraki döngü, tamamlanana kadar javascript'in yürütülmesini beklemeye devam edecektir. Oluşturmayı değiştirmeyecek. Bunun için bir setInterval kullanmanız gerekir.

Şimdi her birkaç saniyede bir kod çalıştırdığınıza göre, bir sonraki sorun, en son yaptığınız şeyin üzerine çizim yaptığınız olacaktır. Yeni render'unuzu görmek için önceki işleminizi silmek üzere clearRect eklemeniz gerekir. Kodunuzu temel alan

Here is a very simple example in JSfiddle.