<!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. 几个常用的linux快捷键和shell知识

    1)   !$    !$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样:     $mkdir mydir     $mv mydir yourdir     $cd y ...

  2. Java 8 新特性1-函数式接口

    Java 8 新特性1-函数式接口 (原) Lambda表达式基本结构: (param1,param2,param3) -> {代码块} 例1: package com.demo.jdk8; i ...

  3. LinkedList集合

    LinkedList集合特点: 1,有序,允许重复(有序指与添加顺序一致) 2,有下标,可以通过下标获取元素,以及将元素插入指定位置 3,底层使用的数据结构是链表以及堆栈结构,线程不安全 4,链表内存 ...

  4. (转) Unicode(UTF-8, UTF-16)令人混淆的概念

    原文地址:http://www.cnblogs.com/kingcat/archive/2012/10/16/2726334.html 为啥需要Unicode 我们知道计算机其实挺笨的,它只认识010 ...

  5. Nginx实用教程（一）：启动、停止、重载配置

    Nginx是一个功能强大的web服务器和负载均衡软件,由俄罗斯人开发.Nginx包括一个master进程和数个worker进程,master进程用于读取.解析配置文件和管理worker进程,worke ...

  6. springmvc 之 SpringMVC视图解析器

    当我们对SpringMVC控制的资源发起请求时,这些请求都会被SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中 ...

  7. Java NIO学习笔记六 SocketChannel 和 ServerSocketChannel

    Java NIO SocketChannel Java NIO SocketChannel是连接到TCP网络socket(套接字)的通道.Java NIO相当于Java Networking的sock ...

  8. SICP-1.4-函数设计

    何为好的函数 每个函数只完成一个工作 不要做重复工作 如果你多次复制一段代码块,说明你应该进行函数抽象了 定义一般化函数 避免特例化 函数说明 一般通过三引号说明 help调出函数说明 避免过多的参数 ...

  9. AngularJS的文字溢出处理

    需求大致如图所示,由于本人也是新接触AngularJS,研究好久,制作了一个demo,代码如下: <!DOCTYPE html><html><head><me ...

  10. c++课程设计之菜单选择

    a) 从键盘输入n个数,选择升序还是降序输出 b)创新了日历 c) 添加了射箭游戏 d)还加入了好玩的24点游戏     学生签名:  年  月   日   课程设计(论文)评阅意见 等 级 项    ...