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>

相关阅读:
在Windows10上安装Linux子系统
 《ln--软连接》--linux命令
 【转】最详细的Log4J使用教程
 7 str字符串的内置函数
 6.1 range创建数值序列
 6 int数值类型的内置函数
 linux shell 字符串操作（长度，查找，截取，替换）详解
 awk 字符串处理函数
 Shell字符串截取
 5 python基本数据类型
原文地址：https://www.cnblogs.com/zhujiabin/p/6067091.html