zoukankan      html  css  js  c++  java
  • canvas 实现时钟效果

    var clock = document.getElementById('clock');
    var cxt = clock.getContext('2d');

    function drawClock(){

    var now = new Date();
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hour = now.getHours();
    hour = hour + min/60;
    hour = hour>12? hour-12: hour;

    // 清除画布
    cxt.clearRect(0, 0, 500, 500);
    // 表盘
    cxt.lineWidth = 10;
    cxt.strokeStyle = 'blue';
    cxt.beginPath();
    cxt.arc(250, 250, 200, 0, 360, false);
    cxt.closePath();
    cxt.stroke();
    // 刻度
    for(var i=0; i<12; i++){
    cxt.save();
    cxt.lineWidth = 7;
    cxt.strokeStyle = '#000';
    cxt.translate(250, 250);
    cxt.rotate(i * 30 * Math.PI/180);
    cxt.beginPath(0, 0);
    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';
    cxt.translate(250, 250);
    cxt.rotate(i * 6 * 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';
    cxt.translate(250, 250);
    cxt.rotate(30 * hour * Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0, -140);
    cxt.lineTo(0, 10);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();

    // 分针
    cxt.save();
    cxt.lineWidth = 5;
    cxt.strokeStyle = '#000';
    cxt.translate(250, 250);
    cxt.rotate(6 * min * 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';
    cxt.translate(250, 250);
    cxt.rotate(6 * sec * Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0, -170);
    cxt.lineTo(0, 20);
    cxt.closePath();
    cxt.stroke();

    cxt.beginPath();
    cxt.arc(0, 0, 6, 0, 360, false);
    cxt.closePath();
    cxt.fillStyle = 'gray';
    cxt.fill();
    cxt.stroke();

    cxt.beginPath();
    cxt.arc(0, -150, 5, 0, 360, false);
    cxt.closePath();
    cxt.fillStyle = 'gray';
    cxt.fill();
    cxt.stroke();

    cxt.restore();
    }
    drawClock();
    setInterval(drawClock, 1000);

  • 相关阅读:
    nginx重新安装操作
    npm 安装部分模块失败处理
    idea 修改每个变量名都是不同的颜色
    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)
    【问题与解决】Github 上传代码报错(error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version)
    Eclipse无法打开 Eclipse MarketPlace的解决办法(版本4.8)
    常见数据结构及基本用法
    并差集
    贪心
    二分and三分
  • 原文地址:https://www.cnblogs.com/liubu/p/7846924.html
Copyright © 2011-2022 走看看