大昔に文字を動かしていたあれ(MARQUEEやtextbox内での移動)ではなく、HTML5のcanvasに文字を表示して動かしてみます。
結局同じ事のようですが、canvas内の文字は色々と拡張性があります。
まずここでは単純に横に移動するテキストを作成
ポイントは文字を表示する座標を変数にして後は等速運動の式(x += 10;)を入れる事と、setInterval(drawScreen, 500);で定期的に命令を繰り返すタイマーの設定をすることです。
そしてこのままだと同じ文字が延々と続いて移動しだします。setIntervalがかかると前に描いた文字をクリアしなければなりません。
context.clearRect(0, 0, theCanvas.width, theCanvas.height);を使用してcanvas全体をクリアしました。
JavaScriptソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasApp() { if (!canvas || !canvas.getContext) { return; }else{ var theCanvas = document.getElementById("canvas"); var context = theCanvas.getContext("2d"); function drawScreen() { context.clearRect(0, 0, theCanvas.width, theCanvas.height); x += 10; context.fillStyle = "#000000"; context.font = "20px _sans"; context.textBaseline = "top"; context.fillText("Hello World!", x, 80 ); } } var x = 0; setInterval(drawScreen, 500); } |
HTMLソース
1 |
<canvas id="canvas" width="500" height="300"> Your browser does not support the HTML 5 Canvas. </canvas> |