zoukankan html css js c++ java

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>

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,
    }
}())

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

查看全文

相关阅读:
JavaScript 学习笔记之最终篇
 JavaScript 学习笔记（三）
JavaScript 学习笔记（一）
JAVA 多线程机制（二）
JAVA 多线程机制（一）
apache配置CA证书通过https通信
 httpd的一些知识点
 Elasticsearch安装图形化界面工具Head插件
 Logstash收集nginx访问日志和错误日志
 lvm管理卷之缩减卷大小

原文地址：https://www.cnblogs.com/sk-3/p/7002443.html