canvas 时钟动画

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

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

效果图，没有录制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,
    }
}())

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