キャンバスは時間がたつと1つずつ要素を変更します

Question

私はキャンバス内のアニメーションを使って作業していますが、プレーンテキストからプレーンテキストに変更する場所にしたいと思っていました...プレーンブラックの言葉は大胆な多色文字。私が試した何...

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

私の目標は、数秒後に、それを印刷することですかそこら1つの変更により、一つのテキスト

Answer 1

まず、適切なコンテキストが必要です。おそらく2Dの文脈です。

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

次のループは、完了するまでjavascriptの実行を保留します。レンダリングは変更されません。そのためにはsetIntervalを使用する必要があります。

これで数秒ごとにコードが実行されるようになりました。次の問題は、最後に描画したものの上に描画することだけです。新しいレンダリングの内容を確認するには、前のレンダリングを消去するためにclearRectを追加する必要があります。

Here is a very simple example in JSfiddleコードに基づいています。