平常当商店无忙的上,就爱写有小作用啊的,一来复习复习,二来可以发现部分问题。

 

今于博里看别人作了平等表的图,卧槽…妥妥的行事好多年的旋律,后来想想还是做好自己之政工总算了,想那么大多涉及啥,就写了一个手表….

 

成效图,没有录制gif的

 

2018正版葡京赌侠诗 1

 

直接上代码:

 

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

 

理所当然准备打包一下之,要下班时来任务了,飞了….

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图