スクリプトによる canvas の描画

Sample Script

(function () {

var canvas = null;
var context = null;

window.addEventListener("load", function() {
	canvas = document.getElementById("canvas");
	context = canvas.getContext('2d');
	setInterval(draw, 1000);
}, false);

function draw() {
	// canvasをクリア
	context.clearRect(0, 0, 300, 150);
	// 現在の日時を取得
	var t = new Date();
	// 背景を描画
	drawBackGround(t);
	// 太陽または月を描画
	drawSunMoon(t);
	// 日時を描画
	drawDatetime(t);
}

/* 背景を描画 */
function drawBackGround(t) {
	// 現在のcanvasの状態を保存
	context.save();
	// 背景の色を時間によって確定
	var h = t.getHours();
	if( h >= 6 && h < 18 ) {
		context.fillStyle = "#a4eaf6";
	} else {
		context.fillStyle = "#000044";
	}
	// 背景を塗りつぶす
	context.fillRect(0, 0, 300, 150);
	// canvasの状態を元に戻す
	context.restore();
}

/* 太陽または月を描画 */
function drawSunMoon(t) {
	var h = t.getHours();
	if( h >= 6 && h < 18 ) {
		// 太陽を描画
		drawSun(t);
	} else {
		// 月を描画
		drawMoon(t);
		// 星を描画
		drawStars();
	}
}

/* 太陽を描画 */
function drawSun(t) {
	// 現在のcanvasの状態を保存
	context.save();
	// 太陽を描画
	var rad = getAngle(t);
	var p = getArcArg(rad);
	context.beginPath();
	context.arc(p.x, p.y, p.radius, p.startAngle, p.endAngle, p.anticlockwise);
	var grad = context.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
	grad.addColorStop(0, "#ffffff");
	grad.addColorStop(0.5, "#FFFB13");
	grad.addColorStop(1, "#FFCB1D");
	context.fillStyle = grad;
	context.fill();
	// canvasの状態を元に戻す
	context.restore(t);
}

/* 月を描画 */
function drawMoon(t) {
	// 現在の canvas の状態を保存
	context.save();
	// 月を描画
	var rad = getAngle(t);
	var p = getArcArg(rad);
	context.fillStyle = "yellow";
	context.beginPath();
	context.arc(p.x, p.y, p.radius, p.startAngle, p.endAngle, p.anticlockwise);
	context.fill();
	// 月の満ち欠けを描画
	var q = getArcArg(rad - Math.PI / 24);
	context.fillStyle = "#000044";
	context.beginPath();
	context.arc(q.x, q.y, q.radius, q.startAngle, q.endAngle, q.anticlockwise);
	context.fill();
	// canvas の状態を元に戻す
	context.restore();
}

/* 星を描画 */
function drawStars() {
	// 現在のcanvasの状態を保存
	context.save();
	// 星をランダムに描画
	context.strokeStyle = "rgba(255, 255, 0, 0.5)";
	for( var i=0; i<20; i++ ) {
		var s = getRandomPos();
		context.beginPath();
		context.moveTo(s.x-2, s.y);
		context.lineTo(s.x+2, s.y);
		context.stroke();
		context.beginPath();
		context.moveTo(s.x, s.y-4);
		context.lineTo(s.x, s.y+4);
		context.stroke();
	}
	// canvasの状態を元に戻す
	context.restore();
}

/* 太陽または月の角度（ラジアン）を算出 */
function getAngle(t) {
	// 06:00または18:00から今までの経過秒数
	var h = t.getHours();
	var m = t.getMinutes();
	var s = t.getSeconds();
	var sec = (h * 3600) + (m * 60) + s;
	if( h < 6 ) {
		sec += 3600*6;
	} else if( h < 18 ) {
		sec -= 3600*6;
	} else {
		sec -= 3600*18;
	}
	// 月の角度
	var rad = Math.PI * ( 1 - ( sec / 43200 ) );
	return rad;
}

/* 太陽または月の円を描くarc()メソッドの引数を算出 */
function getArcArg(rad) {
	var arg = {
		x: 150 + Math.cos(rad) * 100,
		y: 150 - Math.sin(rad) * 100,
		radius: 30,
		startAngle: 0,
		endAngle: Math.PI * 2,
		anticlockwise:false
	};
	return arg;
}

/* 星の座標をランダムに算出 */
function getRandomPos() {
	var pos = {
		x: Math.random() * 300,
		y: Math.random() * 150
	};
	return pos;
}

/* 日時を描画 */
function drawDatetime(t) {
	// 現在のcanvasの状態を保存
	context.save();
	// 日付の文字列
	var yer = (t.getYear() + 1900).toString();
	var mon = ((t.getMonth() + 1).toString()).replace(/^(\d)$/, "0$1");
	var dat = ((t.getDate()).toString()).replace(/^(\d)$/, "0$1");
	var wek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sut"][t.getDay()];
	var date = yer + "-" + mon + "-" + dat + "（" + wek + "）";
	// 時間の文字列
	var hur = ((t.getHours()).toString()).replace(/^(\d)$/, "0$1");
	var min = ((t.getMinutes()).toString()).replace(/^(\d)$/, "0$1");
	var sec = ((t.getSeconds()).toString()).replace(/^(\d)$/, "0$1");
	var time = hur + ":" + min + ":" + sec;
	// canvasに描画
	var h = t.getHours();
	if( h >= 6 && h < 18 ) {
		context.fillStyle = "#000044";
	} else {
		context.fillStyle = "#e3f4fe";
	}
	context.font = "18px 'Monotype Corsiva'";
	context.fillText(date, 10, 30);
	context.fillText(time, 10, 50);
	// canvasの状態を元に戻す
	context.restore();
}

})();
HTML

スクリプトによる canvas の描画
