h5 Canvas时钟制作

待我称王封你为后i 2022-03-17 15:43 333阅读 0赞

canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟  
在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上的数字、钟表上的指针、定时器元素  
下面确定使用的html页面:  
1.h5Clock.html

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>a sample canvas example</title>
        <style>
        body{
          background: #dddddd;
        }
        #canvas {
          margin: 10px;
          padding: 10px;
          background: #ffffff;
          border: thin inset #aaaaaa;
        }
        </style>
      </head>
      <body>
        <canvas id="canvas" width="350" height="350">
          canvas not supported
        </canvas>
      </body>
    </html>

在上面代码中,我们使用了canvas标签进行确定布局,使其id=“canvas”,width、height分别为350,其中具体的逻辑,我们在h5Clock.js代码中进行编写,具体内容如下所示:  
2.首先我们需要进行初始化常量如下:

let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d'),
      FONT_HEIGHT = 15,
      MARGIN = 35,
      HAND_TRUNCATION = canvas.width  / 25,
      HOUR_HAND_TRUNCATION = canvas.width / 10,
      NUMERAL_SPACING = 20,
      RADIUS = canvas.width / 2 - MARGIN,
      HAND_RADIUS = RADIUS + NUMERAL_SPACING;

现在就可以进行绘制具体内容了,我们先进行绘制两个圆,一个是钟表的外边框,一个是钟表中间的圆心点  
3.绘制钟表边框和圆心

// 绘制表示钟面的
    function drawCircle() {
      context.beginPath(); // 开始定义某一段路径
      context.strokeStyle = 'red';
      context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
      context.stroke(); // 进行描绘路径的边缘
      /* context.fill() */;
    }
    // 绘制圆心点
    function drawCenter() {
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
      /* context.stroke() */;
      context.fill();
    }

在方法drawCircle、drawCenter中,使用属性分别如下:

> beginPath // 开始描绘路径的边缘,也就是线条的起点  
> strokeStyle // 描绘时所需要的样式  
> arc // 进行绘制图形圆,其x,y坐标分别为canvas元素的一半,绘制范围是(0, Math.PI \* 2)  
> stroke // 进行填充内容,对上面确定的图形填充颜色描绘路径的边缘

在绘制圆形表盘时,先调用beginPath()方法进行定义路径,然后再调用arc()方法创建一个圆形的路径,等到调用了stroke()方法之后,刚才定义的路径才能够变得可见,同样在绘制圆心的时候,也是使用同样的方法,只是在使用fill()方法进行填充成实心圆  
4.绘制钟表上面的数字

function drawNumberals() {
      const numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      let angle = 0;
      let numerWidth = 0;
    
      numerals.forEach(function(numeral) {
        angle = Math.PI / 6 * (numeral - 3);
        numerWidth = context.measureText(numeral).width;
        context.fillStyle = 'cornflowerblue';
        context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numerWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 3);
      });
    }

在方法drawNumberals中,使用属性分别如下:

> measureText // 在画布上输出文本之前，检查字体的宽度,measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。  
> fillStyle // 表示填充的样式,在这里我们使用cornflowerblue颜色进行填充字体  
> fillText // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。但是由于我们指定了fillStyle会有所改变,在fillText中通常会有4个参数,分别是规定在画布上输出的文本、开始绘制文本的 x 坐标位置（相对于画布）、开始绘制文本的 y坐标位置（相对于画布）、允许的最大文本宽度，以像素计

5.绘制指针  
由于指针的绘制方法大致一样,都是线段,因此我们进行统一的处理,先定义绘制线段的方法,再分别根据时分秒进行区别调用

function drawHand(loc, isHour) {
      let angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
        handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
      context.moveTo(canvas.width / 2, canvas.height / 2);
      context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
      context.stroke();
    }
    
    function drawHands() {
      let date = new Date(),
        hour = date.getHours();
      hour = hour > 12 ? hour - 12 : hour; // 计算小时时间,采用12进制时需要计算
    
      // 进行绘画指针-包括时针、分针、秒针
      drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
      drawHand(date.getMinutes(), false);
      drawHand(date.getSeconds(), false);
    }

在绘制指针中,使用属性分别如下:

> moveTo // 将画笔移动到canvas指定位置  
> lineTo // 在该点与指定点之间绘制一条不可见的路径  
> stroke // 进行填充,使得路径可见

在绘画指针时,先调用moveTo方法将制定移动到canvas指定位置,然后再调用lineTo方法,在该点与另外一个指定点之间绘制一条不可见的路径,最后使用stroke方法进行填充,使得路径可见  
6.设置定时器,进行绘制实时钟表时间

function drawClock() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle();
      drawCenter();
      drawHands();
      drawNumberals();
    }
    
    // 初始化
    context.font = FONT_HEIGHT + 'px Arial';
    loop = setInterval(drawClock, 1000);

使用属性如下:

> clearRect() //方法清空给定矩形内的指定像素,该方法包含4个参数,分别是要清除的矩形左上角的 x 坐标,要清除的矩形左上角的 y 坐标,要清除的矩形的宽度，以像素计,要清除的矩形的高度，以像素计,在这里我们使其坐标为(0,0),进行清楚canvas的宽高.

通过使用setInterval进行实现动画效果,每秒钟进行一次drawClock方法调用,并且在每次调用之前,使用clearRect属性进行清除canvas上一秒界面  
7.实现的完整效果如下所示:

width="100%" height="500" src="//jsfiddle.net/suwu150/3x6vbfqe/84/embedded/" allowfullscreen="allowfullscreen">

##### 参考文档: #####

[canvas元素参考文档][canvas]

[canvas]: http://www.w3school.com.cn/tags/html_ref_canvas.asp