<!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进程(作业)的查看和杀死

    目录: 引入进程 进程 线程 PS命令 TOP命令 其他查看进程命令 进程的优先级 作业控制机制 kill命令 一.引入进程 1.内存划分为:用户空间和内核空间 1.在用户空间里运行的进程,就是用户进 ...

  2. postgresql 多表联查

    使用语句的先后顺序并不是优先级的排序: 连接分为:内连接和外连接,外连接分为左外连接,右外连接,全连接 概念上解释,表之间联合后数据如何整合. 返回的数据条数,可以通过集合求算.假如A集合有10条数据 ...

  3. Java中常见的数据结构的区别

    把多个数据按照一定的存储方式,存储起来,称存储方式之为数据结构. 数据的存储方式有很多,数组,队列,链表,栈,哈希表等等. 不同的数据结构,性能是不一样的,比如有的插入比较快,查询比较快,但是删除比较 ...

  4. datatables 学习笔记1 基础篇

    本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...

  5. linq中给字段添加别名

    linq 是我们在查询中经常回用到的一种形式,比如我们创建一个类,然后List<添加> 并绑定到表格中 public class Modeltest { string id; public ...

  6. JS问题笔记——模拟Jq底层实现工厂模式

    <script type="text/javascript"> (function (window,undefined){ function _$(arguments) ...

  7. eclipse 下，使用正常模式可以运行，DEBUG模式就卡住的解决方案

    最近开发的时候遇到一个问题,就是用运行就可以编译整个项目,但是使用debug模式就卡住了,编译一部分就不动了.开始我以为是项目太大的关系 但是也不至于就DEBUG不行,所以网上差了些资料,原来是DEB ...

  8. Redis数据类型之Set

          前言:set类似于数学上面的集合概念,包含的元素无序,不能重复,能进行交.并.差操作. 一.内部原理              set数据结构,也是随着元素数目的多少而变化.当set中添加 ...

  9. R自带数据包

    datasets(R自带数据包) 作者:王彦博 作品来源:百度百科 precip #长度为70的命名向量 euro #欧元汇率,长度为11,每个元素都有命名 landmasses #48个陆地的面积, ...

  10. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...