canvasの文字を動かしてみる | IT工房

大昔に文字を動かしていたあれ（MARQUEEやtextbox内での移動）ではなく、HTML5のcanvasに文字を表示して動かしてみます。
結局同じ事のようですが、canvas内の文字は色々と拡張性があります。

まずここでは単純に横に移動するテキストを作成

ポイントは文字を表示する座標を変数にして後は等速運動の式（x += 10;）を入れる事と、setInterval(drawScreen, 500);で定期的に命令を繰り返すタイマーの設定をすることです。
そしてこのままだと同じ文字が延々と続いて移動しだします。setIntervalがかかると前に描いた文字をクリアしなければなりません。
context.clearRect(0, 0, theCanvas.width, theCanvas.height);を使用してcanvas全体をクリアしました。
JavaScriptソース

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

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ソース

<canvas id="canvas" width="500" height="300"> Your browser does not support the HTML 5 Canvas. </canvas>

1	<canvas id="canvas" width="500" height="300"> Your browser does not support the HTML 5 Canvas. </canvas>

サンプル

解 説

SNSで共有しましょう。

解　説