zoukankan      html  css  js  c++  java
  • html5 canvas 时钟

    代码实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>画时钟</title>
        <style>
            #c{
                background: white;
            }
        </style>
        <script>
              window.onload=function()  {
                  var Canvas=document.getElementById('c');
                  var ctx=Canvas.getContext('2d');
                 function toDraw() {
                     var x=200;
                     var y=200;
                     var r=150;
                     ctx.clearRect(0,0,Canvas.width,Canvas.height);
                     var oDate= new Date();
                     var  oHours=oDate.getHours();
                     var oMin=oDate.getMinutes();
                     var oSen=oDate.getSeconds();
    
    
                     var  oHoursValue=(-90+oHours*30+oMin/2) *Math.PI/180;
                     var oMinValue=(-90+oMin*6) *Math.PI/180;
                     var oSenValue=(-90+oSen*6) *Math.PI/180;
                     ctx.beginPath();
                     for(var i=0;i<60;i++) {
                         ctx.moveTo(x,y);
                         ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
    
                     }
                     ctx.closePath();
                     ctx.stroke();
    
                     ctx.fillStyle='white';
                     ctx.beginPath();
                     ctx.moveTo(x,y);
                     ctx.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
                     ctx.closePath();
                     ctx.fill();
    
    
                      ctx.lineWidth=3;
                     ctx.beginPath();
                     for(var i=0;i<12;i++) {
                         ctx.moveTo(x,y);
                         ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
    
                     }
                     ctx.closePath();
                     ctx.stroke();
    
    
                     ctx.fillStyle='white';
                     ctx.beginPath();
                     ctx.moveTo(x,y);
                     ctx.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
                     ctx.closePath();
                     ctx.fill();
    
                     //时钟
                     ctx.lineWidth=5;
                     ctx.beginPath();
                     ctx.moveTo(x,y);
                     ctx.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
                     ctx.closePath();
                     ctx.stroke();
    
    
                     ctx.lineWidth=2;
                     ctx.beginPath();
                     ctx.moveTo(x,y);
                     ctx.arc(x,y,r*14/20, oMinValue, oMinValue,false);
                     ctx.closePath();
                     ctx.stroke();
    
    
                     ctx.lineWidth=2;
                     ctx.beginPath();
                     ctx.moveTo(x,y);
                     ctx.arc(x,y,r*19/20,oSenValue,oSenValue,false);
                     ctx.closePath();
                     ctx.stroke();
                 }
                   setInterval(toDraw,1000);
                  toDraw();
              }
        </script>
    </head>
    <body>
    <canvas id="c"  width="400" height="400"></canvas>
    </body>
    </html>
    

      效果:

    19:32:54   2017-09-08 

  • 相关阅读:
    使用DirectX作渲染过程
    记于来北京两个星期
    添加 node mocha 测试模块
    for-of循环
    app-web 开发 追溯debug
    cmd关闭被占用的端口命令及教程详解
    vue使用element-ui的el-input监听不了键盘事件解决
    Nodejs 进阶:Express 常用中间件 body-parser 实现解析
    nodejs设置允许跨域
    nodejs 全局变量和全局对象
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7496099.html
Copyright © 2011-2022 走看看