zoukankan      html  css  js  c++  java
  • HTML5时钟制作代码

      1 <!doctype html>
      2    <meta charset="UTF-8">
      3    <html>
      4      <header></header>
      5      <body>
      6  
      7       <!--canvas标签画圆-->
      8        <canvas id="canvas" width="500" height="500">
      9                您的浏览器不支持canvas标签,无法看到时钟
     10        </canvas>
     11      <script>
     12 
     13       function drawClock(){
     14        
     15        //获取画布
     16        var canvas=document.getElementById('canvas');
     17        //创建context 对象
     18        var cxt=canvas.getContext("2d");
     19        //清除画布
     20         cxt.clearRect(0,0,500,500);
     21        var now =new Date();
     22        var sec=now.getSeconds();
     23        var min=now.getMinutes();
     24        var hour=now.getHours();
     25        //小时必须获取浮点类型(小时+分数转化成的小时)
     26        hour=hour+min/60;
     27        //问题 19:23:30
     28        //将24小时进制转换为12小时
     29        hour=hour>12?hour-12:hour;
     30        //刻度盘
     31        //设置画线的宽度
     32        cxt.lineWidth=10;
     33        //设置笔触的颜色
     34        cxt.strokeStyle="blue";
     35        //开始路径
     36        cxt.beginPath();
     37        //arc(x轴,y轴,半径,开始的度数,结束度数,是否顺时针);
     38        cxt.arc(250,250,200,0,180,false);
     39        //进行绘制
     40        cxt.stroke();
     41        //结束路径
     42        cxt.closePath();
     43         //时刻度
     44       for(var i=0;i<12;i++){
     45           //需要在异次元空间所有要保存画布
     46            cxt.save();
     47            //设置是真时针的宽度
     48            cxt.lineWidth=7;
     49            //设置时针的颜色
     50            cxt.strokeStyle="#000";
     51            //先设置0,0点
     52            cxt.translate(250,250);
     53            //在设置旋转的角度(弧度=角度*π/180)
     54            cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度,时针的间隔是30度
     55            //开始路径
     56            cxt.beginPath();
     57            //时针移动点
     58            cxt.moveTo(0,-170);
     59            //时针移动到
     60            cxt.lineTo(0,-190);
     61            //时针停止移动
     62            cxt.closePath();
     63            cxt.stroke();
     64            cxt.restore();
     65 
     66 
     67         }
     68        //秒刻度
     69       for(var i=0;i<60;i++){
     70           //需要在异次元空间所有要保存画布
     71            cxt.save();
     72            //设置是真时针的宽度
     73            cxt.lineWidth=4;
     74            //设置时针的颜色
     75            cxt.strokeStyle="#000";
     76            //先设置0,0点
     77            cxt.translate(250,250);
     78            //在设置旋转的角度(弧度=角度*π/180)
     79            cxt.rotate(i*6*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度
     80            //开始路径
     81            cxt.beginPath();
     82            //时针移动点
     83            cxt.moveTo(0,-180);
     84            //时针移动到
     85            cxt.lineTo(0,-190);
     86            //时针停止移动
     87            cxt.closePath();
     88            cxt.stroke();
     89            cxt.restore();
     90 
     91         }    
     92         //时针
     93        
     94            //需要在异次元空间保存所有画布
     95            cxt.save();
     96            //设置时针的宽度
     97            cxt.lineWidth=10;
     98            //设置时针的颜色
     99            cxt.strokeStyle="#000";
    100            //先设置0,0点
    101            cxt.translate(250,250);
    102            //设置选择弧度
    103            cxt.rotate(hour*30*Math.PI/180);//角度*Math.PI/180=弧度秒针的间隔是6度
    104            //开始路径
    105            cxt.beginPath();
    106            //时针移动点
    107            cxt.moveTo(0,0);
    108            //时针移动到
    109            cxt.lineTo(0,-150);
    110            //时针停止移动
    111            cxt.closePath();
    112            cxt.stroke();
    113            cxt.restore();
    114 
    115        //分针
    116        
    117            //需要在异次元空间保存所有画布
    118            cxt.save();
    119            //设置分针的宽度
    120            cxt.lineWidth=5;
    121            //设置分针的颜色
    122            cxt.strokeStyle="#000";
    123            //先设置0,0点
    124            cxt.translate(250,250);
    125            //设置旋转弧度
    126            cxt.rotate(min*30*Math.PI/180);//角度*Math.PI/180=弧度分针的间隔是6度
    127            //开始路径
    128            cxt.beginPath();
    129            //时针移动点
    130            cxt.moveTo(0,-150);
    131            //时针移动到
    132            cxt.lineTo(0,10);
    133            //时针停止移动
    134            cxt.closePath();
    135            cxt.stroke();
    136            cxt.restore();
    137        //秒针
    138            //需要在异次元空间中所有需要保存画布
    139            cxt.save();
    140            //设置分针的宽度
    141            cxt.lineWidth=4;
    142            //设置秒针的颜色
    143            cxt.stroeStyle="red";
    144            //先设置00点
    145            cxt.translate(250,250);
    146            //设置旋转角度角度的公式为角度*Math.PI/180
    147            cxt.rotate(sec*6*Math.PI/180);
    148            //时针开始移动
    149            cxt.beginPath();
    150            cxt.moveTo(0,-150);
    151            cxt.lineTo(0,10);
    152             //时针停止移动
    153            cxt.closePath();
    154            cxt.stroke();
    155            //回到上一个状态,即 ctx.fillStyle="white";
    156            cxt.restore();
    157 
    158           //使用setInterval(代码,毫秒时间)  让时钟动起来
    159 }
    160             drawClock();
    161             setInterval(drawClock,1000);
    162                     
    163      </script>
    164     
    165     </body>
    166 </html>

    效果图:

    if you don't try,you will never know!
  • 相关阅读:
    基于fis的前端模块化和工程化方案
    网页中font-family的属性解析
    centos 基础环境配置
    golang的各种数据格式的互相转换
    golang 的编译安装以及supervisord部署
    ip地址库选择
    golang中使用mongodb的操作类以及如何封装
    golang中使用mongodb
    golang使用sqlite
    centos 安装nginx
  • 原文地址:https://www.cnblogs.com/leeten/p/3479656.html
Copyright © 2011-2022 走看看