코드

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>Clock</title>
      <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  </head>
  <body>
      <h1>時計</h1>
      <div>
        <canvas id="canvassample" width="300" height="300" style="background-color: #ddd;"></canvas>
        <h2>現在時刻<span id="hour"></span>:<span id="minute"></span>:<span id="second"></span></h2>
      </div>
  </body>
</html>

$(window).on('load', function(){
  repeat();
})

function repeat() { //1000ミリ秒ごとに繰り返し
 setInterval('clock()',1000);
}

function clock() { //canvasに描画
  var d = new Date();
  var second = d.getSeconds();
  var second_hand = second *6;
  var minute = d.getMinutes();
  var minute_hand = (second/60 + minute) *6;
  var hour = d.getHours();
  if (hour < 12){
    var hour_hand = (minute/60 + hour)*30;
  }else{
    var hour_hand = ((minute/60 + hour) -12)*30;
  }

  var canvas = document.getElementById('canvassample');
  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineWidth = 6;
  ctx.arc(150, 150, 100, ((hour_hand-90)*Math.PI)/180, ((hour_hand-90)*Math.PI)/180, false);
  ctx.clearRect(0, 0, 300, 300);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineWidth = 3;
  ctx.arc(150, 150, 130, ((minute_hand-90)*Math.PI)/180, ((minute_hand-90)*Math.PI)/180, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineWidth = 1;
  ctx.arc(150, 150, 120, ((second_hand-90)*Math.PI)/180, ((second_hand-90)*Math.PI)/180, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(150, 150, 140, 0, Math.PI*2, false);
  ctx.stroke();
  time();
}

function time() { //デジタル時計
  var d = new Date();
  var hour = d.getHours();
  document.getElementById("hour").innerHTML= hour;
  var minute = d.getMinutes();
  document.getElementById("minute").innerHTML= minute;
  var second = d.getSeconds();
  document.getElementById("second").innerHTML= second;
}

완성 화면

데모

See the Pen Simple Clock by ShoutaWATANABE ( @ 쇼타와 타나베 ) on CodePen .

참고・참조

h tp // w w. HTML5. jp/칸ゔぁs/호w. HTML

h tp // w w. HTML5. jp/칸ゔぁs/호w2. HTML

Reference

이 문제에 관하여(JavaScript jQuery Canvas로 아날로그 시계 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ShoutaWATANABE/items/a83574443f29ed688db8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다