Skip to content

Instantly share code, notes, and snippets.

@znz
Created October 17, 2012 15:31
Show Gist options
  • Save znz/3906168 to your computer and use it in GitHub Desktop.
Save znz/3906168 to your computer and use it in GitHub Desktop.
Eテレの0655,2355のデジタル万年カレンダーのようなもの
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment