デザイン変更
前回の時計から、短針（時針）、長針（分針）、秒針のデザインを変更しました。
CanvasのquadraticCurveTo()メソッドで、ペジェ曲線で描いたのですが、なかなか難しい・・・。
・・・もしかすると、良いツールがあるのかも知れない・・・。
インラインフレームに表示してみました。
みっともないソースはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
// ページ読み込み時に init関数を実行
window.onload = function() {
init();
};
// clock関数を0.2秒周期で繰り返す
function init(){
clock();
setInterval('clock();',200);
}
// clock関数 start
function clock(){
var now = new Date();
var canvas = document.getElementById("clockid");
var ctx = canvas.getContext('2d');
ctx.save();
// 各種設定
canvas.width = 300;
canvas.height = 300;
var w = canvas.width;
var h = canvas.height;
var center = {x : w / 2, y : h / 2 };
// 文字盤の数字の中心までの半径(canvas の半分より少し小さく)
var rads = w / 2 * 0.82;
// 文字盤の内側マーク中心までの半径(canvas の半分程度)
var radsm = w / 2 * 0.52;
ctx.save();
ctx.clearRect(0, 0, w, h);
// 時計の外側の丸
ctx.translate(center.x,center.y);
ctx.fillStyle ="#f5deb3";
ctx.shadowBlur = 1;
ctx.shadowColor ="#000";
ctx.beginPath();
ctx.arc(0, 0, (w/2)-5, 0, Math.PI * 2, false);
ctx.stroke();
ctx.fill();
/* circle white */
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
ctx.beginPath();
ctx.arc(0, 0, 100, 0, Math.PI * 2, false);
ctx.fillStyle ="#ffebcd";
ctx.fill();
ctx.restore();
// 文字盤
ctx.save();
ctx.font = "30px 'sans-serif'";
ctx.textAlign ="center";
ctx.textBaseline ="middle";
ctx.fillStyle = "rgb(222,184,135)"; //文字色
ctx.shadowBlur = 3;
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();
// ●（1時、2時、4時、5時、7時、8時、10時、11時）
ctx.strokeStyle = "rgb(222,184,135)";
ctx.fillStyle = "rgb(222,184,135)";
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
for (var i = 0; i < 12; i++) {
if ((i%3)!=0) {
ctx.beginPath();
var radian = i * Math.PI / 6;
var x = center.x + radsm * Math.sin(radian);
var y = center.y - radsm * Math.cos(radian);
ctx.arc(x,y,8,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
ctx.restore();
// 中心を移動
ctx.translate(center.x,center.y);
ctx.save();
// ■（3時、6時、9時）
ctx.lineWidth = 12;
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
ctx.beginPath();
for (var i = 1; i < 12; i++) {
if ((i%3)==0) {
ctx.moveTo(88,0);
ctx.lineTo(64,0);
ctx.rotate(Math.PI/2);
}
}
ctx.stroke();
// ▼（0時）
ctx.lineWidth = 1;
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
ctx.beginPath();
var i = 0;
ctx.moveTo(86,-12);
ctx.lineTo(86,+12);
ctx.lineTo(56,0);
ctx.closePath();
ctx.rotate(Math.PI/2);
ctx.stroke();
ctx.fill();
// 分
ctx.strokeStyle ="#deb887";
ctx.lineWidth = 2;
ctx.beginPath();
for (var i=0;i<60;i++){
if (i%5!=0) {
ctx.moveTo(100,0);
ctx.lineTo(95,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(100,0);
ctx.lineTo(90,0);
ctx.rotate(Math.PI/6);
}
ctx.stroke();
ctx.restore();
// 針の設定
var sec = now.getSeconds();
var min = now.getMinutes();
var hr= now.getHours();
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(0,0,0)";
ctx.lineWidth = 4;
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
ctx.beginPath();
ctx.moveTo(-5,12);
ctx.lineTo(-4,-26);
ctx.quadraticCurveTo(-11,-28,-11,-35);
ctx.quadraticCurveTo(-11,-43,-3.5,-45);
ctx.lineTo(0,-60);
ctx.lineTo(3.5,-45);
ctx.quadraticCurveTo(11,-43,11,-35);
ctx.quadraticCurveTo(11,-28,4,-26);
ctx.lineTo(4,-26);
ctx.lineTo(5,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(0,0,0)";
ctx.lineWidth = 3;
ctx.shadowBlur = 3;
ctx.shadowColor = "#000";
ctx.beginPath();
ctx.moveTo(-5,20);
ctx.lineTo(-3,-70);
ctx.lineTo(0,-88);
ctx.lineTo(3,-70);
ctx.lineTo(5,20);
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.moveTo(0,30);
ctx.quadraticCurveTo(5,31,5,35);
ctx.quadraticCurveTo(5,39,0,40);
ctx.quadraticCurveTo(-5,39,-5,35);
ctx.quadraticCurveTo(-5,31,0,30);
ctx.lineTo(0,-93);
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();
// 文字ベースのデジタル時計
var yobi = new Array("日","月","火","水","木","金","土");
y = now.getYear() + 1900;
g = ("0"+(now.getMonth()+1)).slice(-2);
d = ("0"+now.getDate()).slice(-2);
t = ("0"+now.getHours()).slice(-2);
m = ("0"+now.getMinutes()).slice(-2);
s = ("0"+now.getSeconds()).slice(-2);
yo = now.getDay();
now_Date = y+"/"+g+"/"+d;
now_Time = t+":"+m+":"+s;
now_Yobi = "("+yobi[yo]+") ";
now_Text = now_Time + "<BR>" + now_Date + now_Yobi;
document.getElementById('now_text').innerHTML = now_Text;
} // clock end
</script>
</head>
<body>
<div style="text-align:center;"><canvas id="clockid"></canvas></div>
<div id="now_text" style="text-align:center; font-size:24px;"></div>
</body>
</html>