Javascriptでcanvasにアナログ時計を表示させます。
地道にSin、Cosで座標を計算して描画しています。
<canvas id="clock" style="width:200px;height:200px;"></canvas>
<script>
function TAnalogClock(clockCanvas){
this.can=clockCanvas;
this.size=200;
this.can.width=this.size;
this.can.height=this.size;
this.ctx=this.can.getContext("2d", {willReadFrequently:true});
this.ctx.scale(1,1);
this.ctx.lineCap='round';
this.draw=function(){
//現在時分秒の取得
let jikan=new Date();
let hour=jikan.getHours();
let minute=jikan.getMinutes();
let second=jikan.getSeconds();
let ms=jikan.getMilliseconds();
//キャンバスのクリア
this.ctx.clearRect(0,0,this.size,this.size);
let r=this.size/2;
//円の描画
this.ctx.beginPath();
this.ctx.strokeStyle="rgb(0,0,0)";
this.ctx.lineWidth=r/12;
this.ctx.arc(r,r,r*0.9,0,Math.PI*2,false);
this.ctx.stroke();
//5分毎の目盛りの描画
for(i=0;i<=60;i+=5){
this.ctx.beginPath();
this.ctx.strokeStyle="rgb(0,0,0)";
this.ctx.lineWidth=r/12;
this.ctx.moveTo(r+Math.cos(i/30*Math.PI)*r*0.9 ,
r+Math.sin(i/30*Math.PI)*r*0.9 );
this.ctx.lineTo(r+Math.cos(i/30*Math.PI)*r*0.82,
r+Math.sin(i/30*Math.PI)*r*0.82);
this.ctx.stroke();
}
//短針
this.ctx.beginPath();
this.ctx.strokeStyle="rgb(60,60,60)";
this.ctx.lineWidth=r/6;
this.ctx.moveTo(r,r);
this.ctx.lineTo(r+Math.cos((hour+minute/60-3)/6*Math.PI)*r*0.56,
r+Math.sin((hour+minute/60-3)/6*Math.PI)*r*0.56);
this.ctx.stroke();
//長針
this.ctx.beginPath();
this.ctx.strokeStyle="rgb(0,0,0)";
this.ctx.lineWidth=r/10;
this.ctx.moveTo(r,r);
this.ctx.lineTo(r+Math.cos((minute-15)/30*Math.PI)*r*0.7,
r+Math.sin((minute-15)/30*Math.PI)*r*0.7);
this.ctx.stroke();
//秒針
this.ctx.beginPath();
this.ctx.strokeStyle="rgb(120,120,120)";
this.ctx.lineWidth=r/16;
this.ctx.moveTo(r,r);
this.ctx.lineTo(r+Math.cos((second+ms/1000-15)/30*Math.PI)*r*0.76,
r+Math.sin((second+ms/1000-15)/30*Math.PI)*r*0.76);
this.ctx.stroke();
}
setInterval(this.draw.bind(this),100);
}
window.addEventListener("DOMContentLoaded",function(){
//コンストラクタにアナログ時計を描画するキャンバスを指定する
AnalogClock=new TAnalogClock(document.querySelector("#clock"));
});
</script>