• HTML5 canvas 指针时钟


    <!doctype html>
    <html>
    <head></head>
    <body>
    <canvas id="clock" width="500" height="500">
        您的浏览器不支持canvas标签,无法看到时钟
    </canvas>
    <script>
        var clock=document.getElementById('clock');
        var cxt=clock.getContext('2d');
    
        function drawClock(){    
            cxt.clearRect(0,0,500,500);    //清除画布区域
            var now =new Date();
            var sec=now.getSeconds();
            var min=now.getMinutes();
            var hour=now.getHours();            
            
            hour=hour+min/60;    //小时必须获取浮点类型(小时+分数转化成的小时)
            //问题 19:23:30
            //将24小时进制转换为12小时
            hour=hour>12?hour-12:hour;
            
            
            cxt.lineWidth=10;
            cxt.strokeStyle="#A61C3E";    //表盘(蓝色)
            cxt.beginPath();
            cxt.arc(250,250,200,0,Math.PI*360,false);
            cxt.closePath();
            cxt.stroke();
    
            //时刻度
            for(var i=0;i<12;i++){
                cxt.save();                
                cxt.lineWidth=7;    //设置时针的粗细                
                cxt.strokeStyle="#005693";    //设置时针的颜色                
                cxt.translate(250,250);                
                cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
                cxt.beginPath();
                cxt.moveTo(0,-170);
                cxt.lineTo(0,-190);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }
                
            //分刻度
            for(var i=0;i<60;i++){
                cxt.save();                
                cxt.lineWidth=5;                
                cxt.strokeStyle="#04562E";                
                cxt.translate(250,250);            
                cxt.rotate(i*6*Math.PI/180);                
                cxt.beginPath();
                cxt.moveTo(0,-180);
                cxt.lineTo(0,-190);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            }
            
            //时针
                cxt.save();            
                cxt.lineWidth=7;                
                cxt.strokeStyle="#04562E";                
                cxt.translate(250,250);//设置异次元空间的0,0点,画布的圆心
                cxt.rotate(hour*30*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-120);        //针长
                cxt.lineTo(0,10);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            
            
            //分针
                cxt.save();
                cxt.lineWidth=5;
                cxt.strokeStyle="#000";
                cxt.translate(250,250);
                cxt.rotate(min*6*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-150);
                cxt.lineTo(0,15);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
            
                
            //秒针            
                cxt.save();
                cxt.strokeStyle="#611123";
                cxt.lineWidth=3;
                cxt.translate(250,250);                
                cxt.rotate(sec*6*Math.PI/180);//设置旋转角度                
                cxt.beginPath();    //画图
                cxt.moveTo(0,-170);
                cxt.lineTo(0,20);
                cxt.closePath();
                cxt.stroke();                
                cxt.beginPath();    //画出时针、分针、秒针的交叉点、
                cxt.arc(0,0,5,0,360,false);
                cxt.closePath();                
                cxt.fillStyle="gray";    //设置填充样式
                cxt.fill();                
                cxt.stroke();
                
                //设置秒针前段的小圆点
                cxt.beginPath();
                cxt.arc(0,-150,5,0,360,false);
                cxt.closePath();
                cxt.fillStyle="#FFF";
                cxt.fill();                
                cxt.stroke();//设置笔触样式(秒针已设置)                
                cxt.restore();
            }
        
        
        drawClock();    //1000毫秒前要显示
        //使用setInterval(代码,毫秒时间)  让时钟动起来
        setInterval(drawClock,1000);
    </script>
    </body>
    </html>
  • 相关阅读:
    在Visual Studio中使用层关系图描述系统架构、技术栈
    在Visual Studio中使用活动图描述业务流程
    在Visual Studio中使用类图描述领域模型
    在Visual Studio中使用用例图描述参与者与用例的关系
    在Visual Studio中使用用例图描述系统与参与者间的关系
    并行编程中的取消任务、共享状态,等等
    等待所有或任意异步任务完成,以及异步任务完成时的处理方案
    使用IProgress实现异步编程的进程通知
    Task.FromResult应用场景举例
    Task.Delay方法的2个应用实例,单元测试等待,限时限次下载远程资源
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/6067091.html
Copyright © 2020-2023  润新知