HTML5　Canvusにテキスト表示する

投稿日時: 投稿者:

Canvusにテキスト表示する

HTML5から実装されているCanvusにテキスト表示する簡単なプログラム書いて試してみました。
やはり、今更ながらなのですが。。。

この簡単に書いたプログランは、
・背景色を時刻で変える
・日時を表示する
だけの簡単なものです。
テストはChromeとEdgeで行いました。Chromeは毎回確実に動作をしたのですが、Edgeは動かなくなることがありました。
何かいけないことをしているのかも。。。よくわかっていないので、公開するものに使う時はEdgeで十分にテストしてください。
可能ならどうしてEdgeで動かなくなることがあるのかコメントで教えてもらえるとありがたいです。よろしくお願いします。

一読してもらえばおおよその内容がわかると思います。
インターバルで1秒ごとに背景色と日時時刻を書き換えているだけのシンプルなプログラムです。
初期状態のcanvusの状態を保持と初期状態のcanvusの状態を復元はこのプログラムの中では意味はありませんが、複雑なプログラムになってくると便利らしいです。
私もピンと来ていません（イニシャライズ関数を作れば良いような。。。）が、学習した本に載っていたので便利なんだろうと思い、使うようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	alert("Canvusテスト");

	var cCanvus = null;
	var cContext = null;

	//$('#canvus1').load(function () {
	window.addEventListener("load",function(){
		// id:canvus1が読み込まれた際に実行したい処理
		cCanvus = document.getElementById("canvus1");
		cContext = cCanvus.getContext("2d");
		setInterval(drawCunvas, 1000);
	});

	function drawCunvas() {
		//cContextをクリア
		cContext.clearRect(0, 0, 300, 250);
		//現在時刻を取得
		var t = new Date();
		//背景の描画
		drawBackGround(t);
		//日時を描画
		drowDateTime(t);
		
	}

	function drawBackGround(t) {
		//初期状態のcanvusの状態を保持
		cContext.save();

		//時刻によって背景色を変える
		var h = t.getHours();
		if (h > 6 && h < 18) {
			cContext.fillStyle = "#aaa";
		} else {
			cContext.fillStyle = "#333";
		}
		//背景を塗りつぶす
		cContext.fillRect(0, 0, 300, 250);

		//初期状態のcanvusの状態を復元
		cContext.restore();
	}

	function drowDateTime(t) {
		//初期状態のcanvusの状態を保持
		cContext.save();

		//日付の文字列を作成
		var tDate = (t.getYear() + 1900).toString() + "年" + (t.getMonth() + 1).toString() + "月" + (t.getDate()).toString() + "日(" + ["日", "月", "火", "水", "木", "金", "土"][t.getDay()] + ")";



		//時刻の文字列を作成
		var tTime = (t.getHours()).toString() + "時" + (t.getMinutes()).toString() + "分" + (t.getSeconds()).toString() + "秒";

		//日時を描画
		cContext.font = "18px";
		cContext.fillText(tDate, 100, 210);
		cContext.fillText(tTime, 100, 230);

		//初期状態のcanvusの状態を復元
		cContext.restore();
	}

});
</script>
<style type="text/css">

</style>
</head>
<body>


<form>
 <div>
 Canvusテスト
 </div>
 <fieldset>
  <LEGEND></LEGEND>
	<canvas id="canvus1" width="300" height="250"></canvas>
 </fieldset>

 <p><button type='submit'>送信</button></p>
</form>
</body>
</html>

以上、「HTML5 Canvusにテキスト表示する」の簡単なサンプルテストでした。