トップへ(mam-mam.net/)

コピペで使えるアナログ時計を表示するWEBサイト(Canvas+Javascript)

検索:

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>