基于HTML5 Canvas实现炫酷钟表效果

叁歲伎倆 2022-12-19 03:51 171阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  分解步骤
     *  画布初始化
     *  定义常量
     *  工具类函数
     *  绘制钟表轮框
     *  钟表指数
     *  绘制钟表指针
     *  钟表动画
 *  小结

# 前言 #

HTML5支持的canvas可以在Web中画各种相对复杂的图案，只要你愿意，前端不需要美工设计再提供任何切图！废话不多说，进入正题，本文将给大家介绍通过HTML5 Canvas实现炫酷钟表效果。

# 正文 #

## 分解步骤 ##

首先先到网上随便找一个钟表的图片当作本文的设计图。  
![在这里插入图片描述][20201105114647781.png_pic_center]  
这个图表的渲染可以分为几个大的方向，钟表的轮盘，钟表的刻度和上面的数字，钟表指针和中间的圆心，这样钟表大概的步骤就完成了，最后再实现钟表转动的动画这个就算完成了。

## 画布初始化 ##

使用2d上下文建立画布

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>基于canvas实现clock效果</title>
    </head>
    <body>
        <canvas id="clock" width="200" height="200"></canvas>
    </body>
    <script src="./clock.js"></script>
    </html>

var drawing = document.getElementById('clock'), context;

## 定义常量 ##

定义常量的目的是为了增强这个钟表样式的可配置性和可维护性，之后函数可能会大量用到的常量定义如下：

const radius = 4, // 指数圈半径
        radius1 = 100, // 圆1半径(这里圆1的直径需要为画布width的一半, 不然下面刻度的部分可能对不上)
        radius2 = 90, // 圆2半径
        radius3 = 83, // 圆3半径
        fontRadius = 65, // 字体距圆心的距离
        hourWidth = 5, // 时针宽度
        hourHeight = 55, // 时针高度
        hourShadow = 2; // 时针阴影
        minuteWidth = 3, // 分针宽度
        minuteHeight = 68, // 分针高度
        minuteShadow = 1; // 分针阴影
        secondWidth = 1, // 秒针宽度
        secondHeight = 80, // 秒针高度
        secondShadow = 0.5; // 秒针阴影

## 工具类函数 ##

这里定义了sin,cos和degTolength函数，具体的说明已经写在注释里了，为什么要定义sin,cos？Math库里不是有现成的，因为太久没写数学题了，额，有点分不清sin,cos的正负，所以为了后面函数绘制计算的方便，便转换成了角度并且取了字符串

/** * 把sin值封装成绝对正数,因为我不记得什么时候取负数了，头皮发麻 * @params num 度数 */
    function sin(num){ 
        return Math.abs(Math.sin(degTolength(num)));
    }
    
    /** * 把cos值封装成绝对正数 * @params num 度数 */
    function cos(num){ 
        return Math.abs(Math.cos(degTolength(num)));
    }
    
    /** * 度数转弧度 */
    function degTolength(num){ 
        return num * (2 * Math.PI / 360);
    }

## 绘制钟表轮框 ##

钟表轮框不难看出，由三个圆叠加形成，第一个是白变黑的渐变色，第二个是黑灰渐变色，第三个橘黄变黄的渐变色

/** * 钟表轮框 */
    function paintClockBorder(){ 
        // 先画一个圈圈出来
        context.beginPath();
        context.arc(100, 100, radius1, 0, 2 * Math.PI, false);
        // 调个白变黑渐变色
        var fTo0 = context.createLinearGradient(-50, 100, 200, 100);
        fTo0.addColorStop(0, '#fff');
        fTo0.addColorStop(1, '#000');
        // 第一个最外面的圈圈搞定
        context.fillStyle = fTo0;
        context.fill();
        // 咱开始画第二个圈圈
        context.beginPath();
        context.arc(100, 100, radius2, 0, 2 * Math.PI, false);
        // 搞个黑灰渐变色
        var bTod = context.createLinearGradient(10, 100, 190, 100);
        bTod.addColorStop(0, '#000');
        bTod.addColorStop(1, '#39452D');
        context.fillStyle = bTod;
        context.fill();
        // 终于搞第三个圈圈了
        context.beginPath();
        context.arc(100, 100, radius3, 0, 2 * Math.PI, false);
        // 调个橘黄to黄渐变
        var oToy = context.createLinearGradient(20, 70, 180, 170);
        oToy.addColorStop(0, '#E17101');
        oToy.addColorStop(1, '#FFF507');
        // 第三个圈圈搞定
        context.fillStyle = oToy;
        context.fill();
    }

## 钟表指数 ##

这里主要就是初中数学的三角sin,cos的计算吧，唯一要注意的就是因为我取了绝对值，所以要分四个区间去渲染

/** * 钟表指数 */
    function paintClockSign(){ 
        context.beginPath();
        // 咱先画大的，每10分钟的,注意要分四个区间去渲染
        for(let i = 0; i < 12; i++){ 
            // 每加一个就加30deg
            if(i < 3){ 
                context.moveTo(radius1 + radius3 * sin(30 * i) + radius, radius1 - radius3 * cos(30 * i));
                context.arc(radius1 + radius3 * sin(30 * i), radius1 - radius3 * cos(30 * i), radius, 0, 2 * Math.PI, false);
            }else if(i >= 3 && i < 6){ 
                context.moveTo(radius1 + radius3 * sin(30 * i) + radius, radius1 + radius3 * cos(30 * i));
                context.arc(radius1 + radius3 * sin(30 * i), radius1 + radius3 * cos(30 * i), radius, 0, 2 * Math.PI, false);
            }else if(i >= 6 && i < 9){ 
                context.moveTo(radius1 - radius3 * sin(30 * i) + radius, radius1 + radius3 * cos(30 * i));
                context.arc(radius1 - radius3 * sin(30 * i), radius1 + radius3 * cos(30 * i), radius, 0, 2 * Math.PI, false);
            }else{ 
                context.moveTo(radius1 - radius3 * sin(30 * i) + radius, radius1 - radius3 * cos(30 * i));
                context.arc(radius1 - radius3 * sin(30 * i), radius1 - radius3 * cos(30 * i), radius, 0, 2 * Math.PI, false);
            }
        }
        context.fillStyle = '#000';
        context.fill();
        // 然后咱画一下分钟的,分钟的每加一个是加6deg
        context.beginPath();
        for(let i = 0; i < 60; i++){ 
            if(i < 15){ 
                context.moveTo(radius1 + (radius3 - radius) * sin(6 * i), radius1 - (radius3 - radius) * cos(6 * i));
                context.lineTo(radius1 + radius3 * sin(6 * i), radius1 - radius3 * cos(6 * i));
            }else if(i >= 15 && i < 30){ 
                context.moveTo(radius1 + (radius3 - radius) * sin(6 * i), radius1 + (radius3 - radius) * cos(6 * i));
                context.lineTo(radius1 + radius3 * sin(6 * i), radius1 + radius3 * cos(6 * i));
            }else if(i >= 30 && i < 45){ 
                context.moveTo(radius1 - (radius3 - radius) * sin(6 * i), radius1 + (radius3 - radius) * cos(6 * i));
                context.lineTo(radius1 - radius3 * sin(6 * i), radius1 + radius3 * cos(6 * i));
            }else{ 
                context.moveTo(radius1 - (radius3 - radius) * sin(6 * i), radius1 - (radius3 - radius) * cos(6 * i));
                context.lineTo(radius1 - radius3 * sin(6 * i), radius1 - radius3 * cos(6 * i));
            }
        }
        context.strokeStyle = '#AD9300';
        context.stroke();
        // 最后我们开始写度数的字
        context.font = '20px Arial';
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        for(let i = 1; i <= 12; i++){ 
            if(i <= 3){ 
                context.fillText(i, radius1 + fontRadius * sin(30 * i), radius1 - fontRadius * cos(30 * i));
            }else if(i > 3 && i <= 6){ 
                context.fillText(i, radius1 + fontRadius * sin(30 * i), radius1 + fontRadius * cos(30 * i));
            }else if(i > 6 && i <= 9){ 
                context.fillText(i, radius1 - fontRadius * sin(30 * i), radius1 + fontRadius * cos(30 * i));
            }else{ 
                context.fillText(i, radius1 - fontRadius * sin(30 * i), radius1 - fontRadius * cos(30 * i));
            }
        }
    }

## 绘制钟表指针 ##

用到最关键的是rotate，先绘制竖直的矩形，再进行旋转，不过在调用rotate的时候需要先把原点换到圆心的位置

/** * 钟表指针 */
    function paintClockPointer(){ 
        let hour = new Date().getHours(),
            minute = new Date().getMinutes(),
            second = new Date().getSeconds();
        context.beginPath();
        context.fillStyle = '#fff';
        // 搞个阴影吧，不搞阴影太丑了。
        context.shadowBlur = 4;
        context.shadowColor = '#B97C29';
        // 先把画布原点换到圆心，因为得绕中心旋转
        context.translate(radius1, radius1);
        // 先时针吧，时针得粗一点
        context.shadowOffsetX = hourShadow;
        context.shadowOffsetY = hourShadow;
        context.rotate(degTolength(hour * 30));
        context.fillRect(- 2.5, - hourHeight + 10, hourWidth, hourHeight);
        // 分针
        context.shadowOffsetX = minuteShadow;
        context.shadowOffsetY = minuteShadow;
        context.rotate(degTolength( - hour * 30 + minute * 6));
        context.fillRect(- 2.5, - minuteHeight + 10, minuteWidth, minuteHeight);
        //秒针
        context.shadowOffsetX = secondShadow;
        context.shadowOffsetY = secondShadow;
        context.rotate(degTolength(- ( - hour * 30 + minute * 6) + second * 6));
        context.fillRect(- 2.5, - secondHeight + 10, secondWidth, secondHeight);
        // 圆心画个小黑点吧
        context.beginPath();
        context.arc(0 ,0 ,1 ,0, 2 * Math.PI, false);
        context.fillStyle = '#000';
    }

## 钟表动画 ##

经过上面的部分钟表的静态就已经完成了，并且会和目前时间同步，但是动画怎么实现呢，这里采取的方式清空画布，重新渲染，并把这个过程放入定时函数来实现钟表的动画

// 判断浏览器是否支持canvas
    if(drawing.getContext){ 
        context = drawing.getContext('2d');
        setInterval(paintClock, 1000);
    }
    /** * 绘制钟表 */
    function paintClock(){ 
    	// 清空画布
        context.height = context.height;
        // 保存初始的配置，颜色，画布圆心，旋转度数等
        context.save();
        paintClockBorder();
        paintClockSign();
        paintClockPointer();
        // 重置配置
        context.restore();
    }

# 小结 #

到这里，基于HTML5 Canvas实现炫酷钟表效果就结束了, 具体效果如下动图  
![在这里插入图片描述][20201106095700354.gif_pic_center]  
附上github链接：https://github.com/czm1290433700/canvas-clock  
有需要的小伙伴可以自取，觉得不错别忘了给个star哈  
  
  
  
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[20201105114647781.png_pic_center]: /images/20221120/f02e6078d5594a1f9bb7ed69c16236a7.png
[20201106095700354.gif_pic_center]: https://img-blog.csdnimg.cn/20201106095700354.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200909212813647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE=,size_16,color_FFFFFF,t_70#pic_center