znz/digital-perpetual-calendar.html

## digital-perpetual-calendar.html
<!DOCTYPE html>
<html>
<head>
<!-- https://gist.github.com/3906168 -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="user-scalable=no, width=device-width" />
	<script type="text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			window.addEventListener("devicemotion",onDeviceMotion,false);
			$('#c').on("touchstart",onTouch).on("mousedown",onTouch);
		});

		var today = new Date();
		var wdayStr = "月火水木金土日";
		var wday = today.getDay();
		var timerId = false;
		function singleTap() {
			timerId = false;
			today = new Date(today.getFullYear(),today.getMonth(),today.getDate()+1);
		}
		function doubleTap() {
			wday = (wday + 1) % 7;
		}
		function onTouch(event){
			event.preventDefault();
			if (timerId) {
				clearTimeout(timerId);
				timerId = false;
				doubleTap();
			} else {
				timerId = setTimeout('singleTap()', 200);
			}
		}
		function onDeviceMotion(event){
			var cv = document.getElementById("c");
			var ctx = cv.getContext("2d");
			var accel = event.accelerationIncludingGravity;
			var angle = Math.atan2(accel.y,accel.x)
			ctx.clearRect(0,0,cv.width,cv.height);
if (false) {
			ctx.beginPath();
			ctx.arc(50,50,5,0,2*Math.PI,false);
			ctx.moveTo(50,50);
			ctx.lineTo(50-50*Math.cos(angle),50+50*Math.sin(angle));
			ctx.stroke();
}
			ctx.save();
			ctx.translate(cv.width/2,cv.height/2);
			ctx.rotate(-Math.PI/2-angle);
			ctx.translate(-cv.width/2,-cv.height/2);
			var font = "pt Helvetica";
			ctx.font = 12 + font;
			ctx.fillText(today.getMonth()+1+"月",cv.width/3,cv.height/5);
			ctx.font = 50 + font;
			ctx.fillText(today.getDate(),cv.width/4,cv.height/2);
			ctx.font = 15 + font;
			ctx.fillText(wdayStr.slice(wday,wday+1)+"曜日",cv.width*3/10,cv.height*7/10);
			ctx.restore();
		}
	</script>
	<title>デジタル万年カレンダー</title>
</head>
<body>

	<div style = "text-align:center;margin-top:10px;">
		<canvas id="c" width="200" height="200"></canvas>
	</div>

	<ul>
		<li>Eテレの0655,2355のデジタル万年カレンダーを参考にしました。</li>
		<li>タップで日付が変わります。</li>
		<li>ダブルタップで曜日が変わります。</li>
		<li>加速度センサー対応のデバイスで見ると...</li>
	</ul>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- https://gist.github.com/3906168 -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="user-scalable=no, width=device-width" />
	<script type="text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	window.addEventListener("devicemotion",onDeviceMotion,false);
	$('#c').on("touchstart",onTouch).on("mousedown",onTouch);
	});

	var today = new Date();
	var wdayStr = "月火水木金土日";
	var wday = today.getDay();
	var timerId = false;
	function singleTap() {
	timerId = false;
	today = new Date(today.getFullYear(),today.getMonth(),today.getDate()+1);
	}
	function doubleTap() {
	wday = (wday + 1) % 7;
	}
	function onTouch(event){
	event.preventDefault();
	if (timerId) {
	clearTimeout(timerId);
	timerId = false;
	doubleTap();
	} else {
	timerId = setTimeout('singleTap()', 200);
	}
	}
	function onDeviceMotion(event){
	var cv = document.getElementById("c");
	var ctx = cv.getContext("2d");
	var accel = event.accelerationIncludingGravity;
	var angle = Math.atan2(accel.y,accel.x)
	ctx.clearRect(0,0,cv.width,cv.height);
	if (false) {
	ctx.beginPath();
	ctx.arc(50,50,5,0,2*Math.PI,false);
	ctx.moveTo(50,50);
	ctx.lineTo(50-50Math.cos(angle),50+50Math.sin(angle));
	ctx.stroke();
	}
	ctx.save();
	ctx.translate(cv.width/2,cv.height/2);
	ctx.rotate(-Math.PI/2-angle);
	ctx.translate(-cv.width/2,-cv.height/2);
	var font = "pt Helvetica";
	ctx.font = 12 + font;
	ctx.fillText(today.getMonth()+1+"月",cv.width/3,cv.height/5);
	ctx.font = 50 + font;
	ctx.fillText(today.getDate(),cv.width/4,cv.height/2);
	ctx.font = 15 + font;
	ctx.fillText(wdayStr.slice(wday,wday+1)+"曜日",cv.width3/10,cv.height7/10);
	ctx.restore();
	}
	</script>
	<title>デジタル万年カレンダー</title>
	</head>
	<body>

	<div style = "text-align:center;margin-top:10px;">
	<canvas id="c" width="200" height="200"></canvas>
	</div>

	<ul>
	<li>Eテレの0655,2355のデジタル万年カレンダーを参考にしました。</li>
	<li>タップで日付が変わります。</li>
	<li>ダブルタップで曜日が変わります。</li>
	<li>加速度センサー対応のデバイスで見ると...</li>
	</ul>
	</body>
	</html>