HTML5プログラミング -画像表示について-

◇HTML5プログラミング -画像表示について-

背景に画像を表示します

run関数に以下の JavaScriptを追加します

	var img=new Image();
	img.src="「URL」";
	img.onload=function(){
		context.drawImage(img, 0, 0);
	}

ですが，こうすると，画像を読み込み終わってから描画されるので，テキストよりも上に表示されてしまいます

これを回避する為には，描画用関数を作成しておいて，それを必要な時に呼び出す形にします

var canvas;
var context;
var img;

function run(){
	canvas=document.getElementById("karunaCanvas") 
	context=canvas.getContext("2d");

	img=new Image();
	img.src="「URL」";
	img.onload=function(){
		rGame();
	}

	context.font = "22px sans-serif";

	rGame();
}

//描画用関数
function rGame(){
	if(img){
		context.drawImage(img, 0, 0);
	}

	context.fillText("１２３４５６７８９ＡＢＣ", 20, 100);
	context.fillText("１２３４５６７８９ＡＢＣ", 20, 120);
	context.fillText("１２３４５６７８９ＡＢＣ", 20, 140);
	context.fillText("１２３４５６７８９ＡＢＣ", 20, 160);
}

描画用関数rGameを作っておいて，
起動時に呼び出す runと，
画像読み込み終了時にコールバックされる img.onloadの
両方から呼び出すようにします

描画を行う時の注意点として，Imageオブジェクトの中身が無いとエラーになってしまいます
その為，if文でチェックしてから描画するようにしてみました

○TOP○プログラマ専用○HTML5プログラミング○