zoukankan      html  css  js  c++  java
  • Java 时钟

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style type="text/css">
    div{
    text-align: center;
    margin-top: 250px;
    }
    </style>
    </head>
    <body>
    <div>
    <canvas id="clock" width ="200px" height="200px"style="border:1px solid #c3c3c3;">您的浏览器不兼容canvas</canvas>
    </div>

    <script type="text/javascript" src="canvas.js"></script>
    </body>
    <script>
    var dom = document.getElementById('clock');
    var ctx = dom.getContext('2d');
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    //定义钟盘
    function drawBackground(){
    ctx.save();
    ctx.translate(r, r);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.font ='18px Arial';
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    //遍历获取坐标
    hourNumbers.forEach(function(number, i){
    var rad = 2 * Math.PI / 12 * i;
    var x = Math.cos(rad) * (r - 30);
    var y = Math.sin(rad) * (r - 30);
    ctx.fillText(number, x ,y);
    })

    //定义刻度
    for(var i=0;i<60;i++){
    var rad = 2 * Math.PI / 60 * i;
    var x = Math.cos(rad) * (r - 18);
    var y = Math.sin(rad) * (r - 18);
    ctx.beginPath();
    if(i % 5 == 0){
    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#000';
    }else{
    ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#ccc';
    }
    ctx.fill();
    }

    }

    //定义时钟
    function drawHour(hour,minute){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 / 60 * minute;
    ctx.rotate(rad + mrad);
    ctx.lineWidth = 6;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r / 2);
    ctx.stroke();
    ctx.restore();
    }
    //定义分钟
    function drawMinute(minute,second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    var srad = 2 * Math.PI / 60 /60 * second;
    ctx.rotate(rad + srad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r + 18);
    ctx.stroke();
    ctx.restore();
    }
    //定义秒钟
    function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(-2 ,20);
    ctx.lineTo( 2, 20);
    ctx.lineTo( 1, -r + 18);
    ctx.lineTo( -1, -r + 18);
    ctx.fillStyle = '#c14543';
    ctx.fill();
    ctx.restore();
    }
    //定义钟盘圆点样式
    function drawDot(){
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
    ctx.fill();
    }

    //时间函数
    function draw(){
    ctx.clearRect(0, 0, width, height);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute,second);
    drawSecond(second);
    drawDot();
    ctx.restore();
    }
    setInterval(draw, 1000);
    </script>
    </html>

    出处:http://www.cnblogs.com/lixu880/

  • 相关阅读:
    AtCoder Beginner Contest 167
    AtCoder Beginner Contest 166
    AtCoder Beginner Contest 165
    AtCoder Beginner Contest 164
    AtCoder Beginner Contest 163
    AtCoder Beginner Contest 162
    AtCoder Beginner Contest 161
    AtCoder Beginner Contest 160
    AtCoder Beginner Contest 159
    自定义Mybatis自动生成代码规则
  • 原文地址:https://www.cnblogs.com/yangyi9343/p/6404351.html
Copyright © 2011-2022 走看看