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/20; 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/24; 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.85, r+Math.sin(i/30*Math.PI)*r*0.85); this.ctx.stroke(); } //塗りつぶしの色を設定(赤) this.ctx.fillStyle="rgb(255,0,0)"; //文字フォントを設定 this.ctx.font='normal '+r/6+'px Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,'+ '"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","MS Pゴシック",sans-serif'; this.ctx.textBaseline="middle"; this.ctx.textAlign="center"; for(i=0;i<4;i++){ //座標変換 this.ctx.translate( r+Math.cos(0.5*i*Math.PI)*r*0.76, r+Math.sin(0.5*i*Math.PI)*r*0.76 ); //this.ctx.rotate(0.5*i*Math.PI); //文字のパスの塗りつぶし this.ctx.fillText((i+1)*3, 0,0); //ctx.fillStroke("こん", 0,0); //座標変換をリセット this.ctx.resetTransform(); } //短針 this.ctx.beginPath(); this.ctx.strokeStyle="rgb(60,60,60)"; this.ctx.lineWidth=r/8; 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/12; 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>