再度、アナログ時計を少し改修

20161004a

文字ベースのデジタル時計を、getElementByIdメソッド+innerHTMLでの表示から、CanvasのfillText()メソッドでの表示に変更しました。

その他、針の長さや幅、外枠の影付けなどを見直しました。

ソースをよく見ると、91行目〜107行目をコメントにしています。これをコメントアウトすれば、置き時計風の表示にできます。

しかし、見た目が今ひとつで、HPに載せてみたら、違和感があったので、今回は採用を見送りました。

また、時間が進み過ぎるようになったりするので、悪あがきは止めて、995ミリ秒を1000ミリ秒に戻しました。(268行目)


インラインフレームに表示してみました。


ソースはこちら

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<?php date_default_timezone_set('Asia/Tokyo'); ?>

		<script type="text/javascript">
		var flag = 0;
		var timer = 1;

		function Init(){
			year = <?php echo date("Y"); ?>;
			gatu = <?php echo date("m"); ?>;
			day  = <?php echo date("d"); ?>;
			hour = <?php echo date("G"); ?>;
			minute = <?php echo date("i"); ?>;
			second = <?php echo date("s"); ?>;
			yo = <?php echo date("w"); ?>;
			clock();
		}

		function clock(){

			// 時刻の積算処理
			if (second==60) { second=0;minute++;}
			if (minute==60) { minute=0;hour++;}
			if (hour==24) { hour=0;}

			// リロード(日付切り替えの為、最低00:00:00の1回はリロードが必要)
			if (minute==59 && second==58) {flag=1;}	//60分毎にリロードする
			if (minute==0 && second==0) {
				if (flag==1){						//重複読み込み防止
					window.location.reload();	//時刻校正および日付更新の為にリロードする
					flag=0;
				}	
			}

			// ゼロ埋め処理
			if (gatu<10) {_g="0"+gatu;}else{_g=""+gatu;}
			if (day<10) {_d="0"+day;}else{_d=""+day;}
			if (hour<10) {_h="0"+hour;}else{_h=""+hour;}
			if (minute<10) {_m="0"+minute;}else{_m=""+minute;}
			if (second<10) {_s="0"+second;}else{_s=""+second;}

			// 文字ベースのデジタル時計用
			var yobi = new Array("日","月","火","水","木","金","土");
			var now_Date = year + "/" + _g + "/" + _d;
			var now_Time = _h + ":" + _m + ":" + _s;
			var now_Yobi = "(" + yobi[yo] + ")";

			// アナログ時計の描画
		  
			var canvas = document.getElementById("clockid");
			var ctx = canvas.getContext('2d');
			ctx.save();
 
			// 各種設定
			canvas.width = 280;
			canvas.height = 340;
			var w      = canvas.width;
			var h      = canvas.width;
			var center = {x : w / 2, y : h / 2 };
			// 文字盤の数字の中心までの半径(canvas の半分より少し小さく)
			var rads     = w / 2 * 0.73; 

			ctx.save();
			ctx.clearRect(0, 0, w, h);
 
			// デジタル表示枠
			ctx.fillStyle   ="#ffebcd";
			ctx.shadowBlur = 0;
			ctx.lineWidth = 0;
			ctx.beginPath();
			ctx.moveTo(58,282);
			ctx.lineTo(58+164,282);
			ctx.lineTo(58+164,282+48);
			ctx.lineTo(58,282+48);
			ctx.closePath();
			ctx.stroke();
			ctx.fill();
			
			// 文字ベースのデジタル時計を表示
			ctx.font = "18px 'MS ゴシック'";
			ctx.fillStyle = "#8b4513";
			ctx.shadowBlur = 0;
			ctx.textAlign = "center";
			ctx.fillText( now_Time,w/2,302,160);
			ctx.fillText( now_Date + now_Yobi,w/2,323,160);

			// 時計の外形
			/* ctx.fillStyle   ="#f5deb3";
			ctx.shadowBlur = 3;
			ctx.shadowColor ="#000";
			ctx.beginPath();
			ctx.moveTo(w-5,135);
			ctx.arc(w/2,h/2,135,0,Math.PI,true);	//時計の外枠
			ctx.lineTo(0+5,338);
			ctx.lineTo(w-5,338);
			ctx.closePath();
			ctx.moveTo(58,282);			//デジタル用枠穴
			ctx.lineTo(58+164,282);
			ctx.lineTo(58+164,282+48);
			ctx.lineTo(58,282+48);
			ctx.closePath();
			ctx.stroke();
			ctx.fill("evenodd");	//デジタル用枠を繰り抜き(影を内向きにも付ける)
			*/

			//  中心を移動
			ctx.translate(center.x,center.y);

			// 時計の内側の丸
			ctx.shadowBlur = 3;
			ctx.shadowColor = "#000";
			ctx.beginPath();
			ctx.arc(0, 0, 130, 0, Math.PI * 2, true);
			ctx.fillStyle   ="#ffebcd";
			ctx.fill();
 			ctx.restore();
 
			// 文字盤(1〜12の文字)
			ctx.save();
			ctx.font        = "26px 'sans-serif'";
			ctx.textAlign   ="center";
			ctx.textBaseline    ="middle";
			ctx.fillStyle   = "rgb(222,184,135)"; //文字色
			ctx.shadowBlur = 1;
			ctx.shadowColor = "#000";
			for (var i = 0; i < 12; i++) {
				var radian = i * Math.PI / 6;
				var x = center.x + rads * Math.sin(radian);
				var y = center.y - rads * Math.cos(radian);
				var text = "" + (i == 0 ? "12" : i);
				ctx.fillText(text, x, y);
			}
			ctx.restore();
			
			// 文字盤の背景文字
			ctx.font = "32px 'sans-serif'";
			ctx.strokeStyle = "#ffebcd";
			ctx.fillStyle = "#f5deb3";
			ctx.fillText("Server",93,122);	// 文字盤の背景文字(上)
			ctx.fillText("Clock" ,99,186);	// 文字盤の背景文字(下)
			ctx.restore();


			//  中心を移動
			ctx.translate(center.x,center.y);
			ctx.save();

			// 分の目盛
			ctx.strokeStyle ="#deb887";
			ctx.lineWidth = 2;
			ctx.beginPath();
			for (var i=0;i<60;i++){
				if (i%5!=0) {
					ctx.moveTo(130,0);
					ctx.lineTo(123,0);
					ctx.moveTo(80,0);
					ctx.lineTo(75,0);
				}
				ctx.rotate(Math.PI/30);
			}
			ctx.stroke();
 
			// 時間の目盛
			ctx.strokeStyle ="#deb887";
			ctx.lineWidth = 3;
			ctx.beginPath();
			for (var i=0;i<60;i++){
				ctx.moveTo(130,0);
				ctx.lineTo(118,0);
				ctx.moveTo(80,0);
				ctx.lineTo(70,0);
				ctx.rotate(Math.PI/6);
			}
			ctx.stroke();
			ctx.restore();

			// 時計の外側の丸(目盛より上に描画し影を落とすことで外枠に見せる)
			ctx.fillStyle   ="#f5deb3";
			ctx.shadowBlur = 5;
			ctx.shadowColor ="#000";
			ctx.beginPath();
			ctx.arc(0, 0, (w/2)-5, 0, Math.PI * 2, true);
			ctx.arc(0, 0, (w/2)-10, 0, Math.PI * 2, false);
			ctx.stroke();
			ctx.fill();


			// 針の設定
			var sec = second;
			var min = minute;
			var hr= hour;
			hr = hr>=12 ? hr-12 : hr; // 12以上なら「hr-12」、それ以外なら「hr」
			ctx.fillStyle = "#000";
 
			// 短針
			ctx.save();
			ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
			ctx.strokeStyle = "rgb(222,184,135)";
			ctx.fillStyle   = "rgb(222,184,135)";
			ctx.lineWidth = 4;
			ctx.shadowBlur = 3;
			ctx.shadowColor = "#000";
			ctx.beginPath();
			ctx.moveTo(-8,12);
			ctx.lineTo(-6,-68);
			ctx.lineTo(6,-68);
			ctx.lineTo(8,12);
			ctx.closePath();
			// ctx.stroke();
			ctx.fill();
			ctx.restore();
 
			// 長針
			ctx.save();
			ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
			ctx.strokeStyle = "rgb(222,184,135)";
			ctx.fillStyle   = "rgb(222,184,135)";
			ctx.lineWidth = 3;
			ctx.shadowBlur = 3;
			ctx.shadowColor = "#000";
			ctx.beginPath();
			ctx.moveTo(-5,16);
			ctx.lineTo(-4,-100);
			ctx.lineTo(4,-100);
			ctx.lineTo(5,16);
			ctx.closePath();
			// ctx.stroke();
			ctx.fill();
			ctx.restore();

			// 秒針
			ctx.save();
			ctx.rotate(sec * Math.PI/30);
			ctx.strokeStyle = "rgb(222,184,135)";
			ctx.fillStyle   = "rgb(222,184,135)";
			ctx.lineWidth = 2;
			ctx.shadowBlur = 3;
			ctx.shadowColor = "#000";
			ctx.beginPath();
			ctx.arc(0,36,8,0,Math.PI*2,true);
			ctx.moveTo(0,28);
			ctx.lineTo(0,-120);
			ctx.closePath();
			ctx.stroke();
			// ctx.fill();
			ctx.restore();
 
			// 時計の中心の丸
			ctx.save();
			ctx.beginPath();
			ctx.lineWidth = 5;
			ctx.shadowBlur = 3;
			ctx.shadowColor = "#000";
			ctx.strokeStyle = "rgb(222,184,135)";
			//ctx.fillStyle   = "rgb(186, 168, 132)";
			ctx.fillStyle   = "rgb(222,184,135)";
			ctx.arc(0,0,6,0,Math.PI*2,true);
			ctx.stroke();
			ctx.fill();
			ctx.restore();

			//一定時間経過後に再処理
			second=second+1;
			clearTimeout(timer);
			timer=setTimeout("clock()",1000);
 
		}   // clock end
		</script>
	</head>
	<body onload="Init();">
		<div style="text-align:center; height:340px;"><canvas id="clockid"></canvas></div>
		<div style="text-align:center;"><input type="button" value="サーバーの時刻を再読込" onclick="location.reload();" style="font-size:14px;" /></div>
	</body>
</html>