<!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/

Java 时钟的更多相关文章

  1. JAVA时钟

    效果图如下: //简单动态时钟程序,以图形和数字两种方式来显示当前时间 import javax.swing.*; import java.awt.event.*; import java.awt.* ...

  2. 【Matlab编程】Matlab及Java小时钟

    一年前曾经用matlab的gui做了一个时钟,由于是直接用GUIDE和ActiveX控件写的,程序虽说有许多行,大多数都是自动生成的,自己写的只有十几行而已.闲着没事,就耗费了下午的时间用matlab ...

  3. 【Qt编程】基于Qt的词典开发系列--后序

    从去年八月份到现在,总算完成了词典的编写以及相关技术文档的编辑工作.从整个过程来说,文档的编写比程序的实现耗费的时间更多.基于Qt的词典开发系列文章,大致包含了在编写词典软件过程中遇到的技术重点与难点 ...

  4. 物联网时代-跟着Thingsboard学IOT架构-HTTP设备协议及API相关限制

    thingsboard官网: https://thingsboard.io/ thingsboard GitHub: https://github.com/thingsboard/thingsboar ...

  5. Spark案例分析

    一.需求:计算网页访问量前三名 import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...

  6. 理解Java对象的交互：时钟显示程序

    实现: 结构: 对象:时钟  - 对象:小时                 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...

  7. java多线程并发编程与CPU时钟分配小议

    我们先来研究下JAVA的多线程的并发编程和CPU时钟振荡的关系吧 老规矩,先科普 我们的操作系统在DOS以前都是单任务的 什么是单任务呢?就是一次只能做一件事 你复制文件的时候,就不能重命名了 那么现 ...

  8. Java多线程之sleep方法阻塞线程-模拟时钟

    package org.study2.javabase.ThreadsDemo.status; import java.text.SimpleDateFormat; import java.util. ...

  9. Java实现时钟小程序【代码】

    哎,好久没上博客园发东西了,上一次还是两个月前的五一写的一篇计算器博客,不过意外的是那个程序成了这学期的Java大作业,所以后来稍微改了一下那个程序就交了上去,这还是美滋滋.然后五月中旬的时候写了一个 ...

随机推荐

  1. Android中SimpleAdapter的使用—自定义列表

    本人初学Android,今天研究到Adapter这块感觉挺有意思的,写了个自定义列表进行测试 首先我们新建一个layout列表布局文件,具体布局可以自己设定. 下面贴上我的自定义布局文件代码 < ...

  2. 日志组件一：Log4j

    log4j是Apache的一个开源项目,陪伴了我们多年,但是现在已经不更新了.官网原文如下: Log4j 1.x has been widely adopted and used in many ap ...

  3. 03 编译安装apache的简易配置

    1.监听端口,默认为80,在主配置文件 /etc/httpd24/httpd.conf中可以更改 2.持久连接 Include /etc/httpd24/extra/httpd-default.con ...

  4. Windows 7 下安装mysql-5.7.18-winx64.zip

    mysql-5.7以后压缩包安装有了不小的变化 第一步:到官网下载https://dev.mysql.com/downloads/mysql/ 第二步:解压到一个文件夹 第三步:配置环境变量 把;%M ...

  5. Python中lambda用法

    lambda只是一个表达式,函数体比def简单很多. lambda的主体是一个表达式,而不是一个代码块.仅仅能在lambda表达式中封装有限的逻辑进去. lambda表达式是起到一个函数速写的作用.允 ...

  6. characterEncodingFilter作用

    package com.demo.test; import java.io.IOException; import javax.servlet.Filter; import javax.servlet ...

  7. lucene全文搜索之二：创建索引器（创建IKAnalyzer分词器和索引目录管理）基于lucene5.5.3

    前言: lucene全文搜索之一中讲解了lucene开发搜索服务的基本结构,本章将会讲解如何创建索引器.管理索引目录和中文分词器的使用. 包括标准分词器,IKAnalyzer分词器以及两种索引目录的创 ...

  8. chip-seq数据分析中peak-calling软件-------MACS的安装

    1.下载MACS软件安装包(作者的系统为Ubuntu) 网址链接:http://liulab.dfci.harvard.edu/MACS/ 2.解压文件: tar -zxvf MACS**.tar.g ...

  9. 【Windows 10 应用开发】使用快捷访问键

    UWP 虽然主要面向触控操作,但 Windows 设备是万能工具,不用手指不用笔的时候,也可能会接上键盘耍耍.因此,给应用界面上的一些元素弄个快捷访问键也挺不错的.为了使用 Windows 上的各类应 ...

  10. java基础之集合篇

    (一) 集合类位于JDK中java.util包中. 常用的集合类型分布在java.util.Collection和java.util.Map接口中. java.util.Collection=> ...