zoukankan      html  css  js  c++  java
  • 时钟

    <!DOCTYPE html>
    <html>
    <head>
     <title>时钟</title>
     
    </head>
    <body>
     <canvas  id="clock" width="600"height="600">你的浏览器不支持canvas标签,无法看到时钟
    </canvas>
     <script>
      var canvas=document.getElementById('clock');
      var cxt==clock.getContext('2d');
     function drawClock(){//封装以下函数
      //清除画布
      cxt.clearRect(0,0,600,600);
      var now = now 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="#blue"
      cxt.beginPath();
      cxt.arc(250,250,200,0,360,flase);
      cxt.closePath();
      cxt.stroke();
     
     //刻度
      //时刻度
       for(var i=0;i<12;i++){
        cxt.save();
        // 设置时刻度的粗细
        cxt.linewidth=7;
        // 设置时刻度的颜色
        cxt.strokeStyle="#000";
        //设置0,0点
        cxt.translate(250,250);
        //再设置旋转角度
        cxt.restore(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="#000";
         //设置或者重置画布的0,0
         cxt.translate(250,250);
         //设置旋转角度
         cxt.restore(i*6*Math.PI/180);
         //角度*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="#000";
        // 设置异次元的0,0点
        cxt.translate(250,250);
        // 设置旋转角度
        cxt.restore(hour*30*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-140);
        cxt.lineTo(0,8);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
        //
     
      //分针
        cxt.save();
        //设置分针风格
        cxt.linewidth=5;
        //设置分针的颜色///
        cxt.strokeStyle="#000";
        // 设置异次元的0,0点
        cxt.translate(250,250);
        // 设置旋转角度
        cxt.restore(min*6*Math.PI/180);
        cxt.beginPath();
        cxt.moveTo(0,-160);
        cxt.lineTo(0,15);
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
      
      //秒针
        cxt.save();
        //设置秒针风格
        cxt.linewidth=3;
        //设置秒针的颜色
        cxt.strokeStyle="red";
        // 设置异次元的0,0点
        cxt.translate(250,250);
        // 设置旋转角度
        cxt.restore(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,160,5,0,360,false);
        cxt.closePath();
        //设置填充样式
        cxt.fillStyle="gray";
        cxt.fill();
        //设置笔触样式(已设置)
        cxt.stroke();

        cxt.restore();
       }
      //使用setInterval(代码,毫秒时间) 让时钟动起来
       setInterval(drawClock,1000)
     
     </script>
    </body>
    </html>
  • 相关阅读:
    Python-02 基础语法
    Python-01 基础语法
    windows端口被占用-解决方案
    vue两个独立的组件之间的传值通信
    URI
    Inversion of control
    7月10日每日总结
    7月9日每日总结
    xshell终端设置主机名和用户名颜色
    PyTorch中一些损失函数的使用
  • 原文地址:https://www.cnblogs.com/Annely/p/10241070.html
Copyright © 2011-2022 走看看