平时在公司不忙的时候，就喜欢写一些小效果什么的，一来复习复习，二来可以发现一些问题。

今天在群里看别人发了一手表的图片，卧槽...妥妥的工作好多年的节奏，后来想想还是做好自己的事情算了，想那多干啥，就画了一个手表....

效果图，没有录制gif的

直接上代码：

html

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>canvas clock</title>

        <script type="text/javascript" src="percent.js"></script>

    </head>

    <body>

        <canvas id="canvas" width="600" height="600"></canvas>

    </body>

</html>

<script type="text/javascript">

    clock.canvasClock();

</script>

js

var clock=(function(){

    function _canvasClock(){

        var cvs=document.getElementById('canvas');

        var ctx=cvs.getContext('2d');

        var PI=Math.PI;

        var lineWidth=5;                                             //线宽

        var gradient=ctx.createLinearGradient(10,10,580,580);        //设置圆的颜色渐变

        gradient.addColorStop("0","#a251ff");

        gradient.addColorStop(1,"#2ec2ff");

        ctx.fillStyle = '#ef6670';

        ctx.fillRect(0,0,600,600);

        var drawBig=function(){

            var time=new Date();

            var second=time.getSeconds();                            //秒

            var Minute=time.getMinutes();                            //分

            var hour=time.getHours();                                //时

            //hour=hour+Minute/60;

            hour=hour>12?hour-12:hour;                               //表盘只有12小时

            ctx.clearRect(0,0,600,600);                              //清空给定矩形内的指定像素

            //画圆

            ctx.beginPath();

            ctx.lineWidth=lineWidth;

            ctx.strokeStyle=gradient;

            ctx.arc(300,300,290,0, PI * 2,false);

            ctx.stroke();

            ctx.closePath();

            ctx.beginPath();

            ctx.lineWidth=lineWidth;

            ctx.strokeStyle=gradient;

            ctx.arc(300,300,10,0, PI * 2,false);

            ctx.stroke();

            ctx.closePath();

            for(var i=0;i<60;i++){

                ctx.save();                        　//保存之前画布状态

                ctx.lineWidth=4;                　　 //设置分针的粗细

                ctx.strokeStyle="#616161";          //设置分针的颜色

                ctx.translate(300,300);             //画布圆点设置

                ctx.rotate(i*PI/30);                //角度*Math.PI/180=弧度,设置旋转角度

                ctx.beginPath();                    //开始一条路径

                ctx.moveTo(0,-287);                 //相对画布圆点路径的起点

                ctx.lineTo(0,-283);                 //相对画布圆点路径的终点

                ctx.closePath();                    //结束一条路径

                ctx.stroke();                       //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径

                ctx.restore();                      //restore() 方法将绘图状态置为保存值

            }

            for(var i=0;i<12;i++){

                ctx.save();

                ctx.lineWidth=4;

                ctx.strokeStyle=gradient;

                ctx.translate(300,300);

                ctx.rotate(i*PI/6);

                ctx.beginPath();

                ctx.moveTo(0,-287);

                ctx.lineTo(0,-278);

                ctx.closePath();

                ctx.stroke();

                ctx.restore();

            }

            //时针

            ctx.save();

            ctx.lineWidth=3;

            ctx.strokeStyle="#0f0f0f";

            ctx.translate(300,300);

            ctx.rotate(hour*PI/6+second*PI/108000);

            ctx.beginPath();

            ctx.moveTo(0,-238);

            ctx.lineTo(0,10);

            ctx.closePath();

            ctx.stroke();

            ctx.restore();  

            //分针

            ctx.save();

            ctx.lineWidth=3;

            ctx.strokeStyle="#010101";

            ctx.translate(300,300);

            ctx.rotate(Minute*PI/30+second*PI/1800);

            ctx.beginPath();

            ctx.moveTo(0,-258);

            ctx.lineTo(0,15);

            ctx.closePath();

            ctx.stroke();

            ctx.restore();  

            //秒针

            ctx.save();

            ctx.strokeStyle="#ff100d";

            ctx.lineWidth=3;

            ctx.translate(300,300);

            ctx.rotate(second*PI/30);

            ctx.beginPath();

            ctx.moveTo(0,-278);

            ctx.lineTo(0,20);

            ctx.closePath();

            ctx.stroke();  

            ctx.beginPath();                        //时针分针秒针交点

            ctx.arc(0,0,6,0,2*PI,false);

            ctx.closePath();

            ctx.fillStyle="#fff";

            ctx.fill();

            ctx.stroke();

            ctx.restore();

            requestAnimationFrame(drawBig);            //实现动画修改的接口

        };

        drawBig();

        setInterval(drawBig,1000);                    //每1s重绘一次

    };

    return{

        canvasClock:_canvasClock,

    }

}())

本来准备封装一下的，要下班时来任务了，飞了....

canvas 时钟动画的更多相关文章

  1. 15个超强悍的CSS3圆盘时钟动画赏析

    在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...

  2. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  3. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  4. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

  5. 14款形态各异的超时尚HTML5时钟动画

    14款超时尚的HTML5时钟动画(附源码)   时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...

  6. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  7. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  9. iOS中的时钟动画

    iOS 动画效果非常多,我们在开发中可能会遇到很多动画特效,我们就会用到核心动画框架CoreAnimation,核心动画里面的动画效果有很多,都是在QuartzCore.framework框架里面,今 ...

随机推荐

  1. BIO,NIO与AIO的区别

    Java NIO : 同步非阻塞,服务器实现模式为一个请求一个线程,即客户端发送的连接请求都会注册到多路复用器上,多路复用器轮询到连接有I/O请求时才启动一个线程进行处理.Java AIO(NIO.2 ...

  2. [Swift]LeetCode898. 子数组按位或操作 | Bitwise ORs of Subarrays

    We have an array A of non-negative integers. For every (contiguous) subarray B = [A[i], A[i+1], ..., ...

  3. Hystrix概念设计

    1. Hystrix概念设计 1.1. 大纲 1.2. 基本的容错模式 1.3. 断路器模式 1.4. 舱壁隔离模式 1.5. 容错理念 凡事依赖都可能失败 凡事资源都有限制 网络并不可靠 延迟是应用 ...

  4. AES，DES加密JS源文件及其使用方法

    源文件地址:https://github.com/dididi1234/crypto 进入之后直接下载CryptoJS.js,js中直接引用,小程序也一样可以使用 具体使用方法和vue中的Crypto ...

  5. 面试题：反转字符串（leetcode344）

    编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 你可以 ...

  6. mysql tablespace(独立表空间)超速备份大数据

    前序 对于用户自主创建的表,会采用此种模式,每个表由一个独立的表空间进行管理备份(速度相当的猛) 首先介绍一下文件 .ibd就被称之为独立表空间的数据文件 .frm就是元数据文件 就是创建表后生成的 ...

  7. Linux查找文件内容

    从当前目录递归查找文件名为 .py 中包含 conf 的文件名: find -name "*.py" | xargs grep "conf"

  8. 网络协议 4 - 交换机与 VLAN：办公室太复杂，我要回学校

        上一次,我们通过宿舍联网打魔兽的需求,认识了如何通过物理层和链路层组建一个宿舍局域网.今天,让我们切换到稍微复杂点的场景,办公室.     在这个场景里,就不像在宿舍那样,搞几根网线,拉一拉, ...

  9. Http协议状态码总结

    一.http方法 方法名 说明 get 发送一个获取请求,服务器的响应会包含head与body部分 post 发送一个输入数据的请求,服务器的响应会包含head与body部分 head 服务器响应的只 ...

  10. VM14安装Mas os 13

      工具/原料   VMware Workstation unlocker(for OS X 插件补丁) macOS 10.13镜像 vmware tools 安装前准备   1 下载以上文件: 1. ...