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/

  • 相关阅读:
    LeetCode 1110. Delete Nodes And Return Forest
    LeetCode 473. Matchsticks to Square
    LeetCode 886. Possible Bipartition
    LeetCode 737. Sentence Similarity II
    LeetCode 734. Sentence Similarity
    LeetCode 491. Increasing Subsequences
    LeetCode 1020. Number of Enclaves
    LeetCode 531. Lonely Pixel I
    LeetCode 1091. Shortest Path in Binary Matrix
    LeetCode 590. N-ary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/yangyi9343/p/6404351.html
Copyright © 2011-2022 走看看