canvas 系列1 钟表

最新推荐文章于 2022-07-01 15:35:56 发布

原创最新推荐文章于 2022-07-01 15:35:56 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

本文介绍如何使用HTML5的Canvas元素绘制一个实时更新的动态时钟，包括时针、分针、秒针及数字标记。通过JavaScript获取当前时间，并不断刷新画布来显示时间变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>canvas</title>
  <style>
    canvas{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas height="500" width="500" id="canvas"></canvas>
  <script>
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    HALF_W_CANVAS = canvas.width / 2,
    HALF_H_CANVAS = canvas.height / 2,
    FONT_HEIGHT = 15,
    MARGIN = 35,
    HAND_TRUNCATION = canvas.width / 25,
    HOUR_HAND_TRUNCATION = canvas.width /10,
    NUMERAL_SPACING = 20,
    RADIUS = HALF_W_CANVAS -MARGIN,
    HANS_RADIUS = RADIUS + NUMERAL_SPACING;

  


    function drawCircle(){
      context.beginPath();
      context.arc(HALF_W_CANVAS, HALF_H_CANVAS, RADIUS, 0, Math.PI * 2, true);
      context.stroke();
      
    }
    function drawNumerals(){
      var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
          angle = 0,
          numeralWidth = 0;
          numerals.forEach(function(numeral){
            angle = Math.PI/6 *(numeral-3);
            numeralWidth = context.measureText(numeral).width;
            context.fillText(numeral, HALF_W_CANVAS+Math.cos(angle)*(HANS_RADIUS)-numeralWidth/2, HALF_H_CANVAS+Math.sin(angle)*(HANS_RADIUS)+FONT_HEIGHT/3);
          });
    }

    function drawCenter(){
      context.beginPath();
      context.arc(HALF_W_CANVAS, HALF_H_CANVAS, 5, 0, Math.PI * 2, true);
      context.fill();
    }

    function drawHand(loc, isHour){
      var angle = (Math.PI*2) * (loc/60) - Math.PI/2 ,
      handRadious = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
      context.moveTo(HALF_W_CANVAS, HALF_H_CANVAS);
      context.lineTo(HALF_W_CANVAS+Math.cos(angle)*handRadious, HALF_H_CANVAS+Math.sin(angle)*handRadious);
      context.stroke();
    }

    function drawHands(){
      var date = new Date(),
          hour = date.getHours();
          hour = hour>12?hour-12:hour;
          drawHand(hour*5+(date.getMinutes()/60*5),true);
          drawHand(date.getMinutes(),false);
          drawHand(date.getSeconds(),false);
    }

    function drawClock(){
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle();
      drawCenter();
      drawHands();
      drawNumerals();
      
    }
    context.font='15px sans-serif';
    loop = setInterval(drawClock,1000);

  </script>
</body>
</html>