<!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. tomcat产生大量TIME_WAIT连接

    http://blog.csdn.net/jiangguilong2000/article/details/12523771

  2. Kotlin入门第三课：数据类型

    前文链接: Kotlin学习第一课:从对比Java开始 Kotlin入门第二课:集合操作 初次尝试用Kotlin实现Android项目 Kotlin的数据类型与Java类似,因此这篇文章主要看Kotl ...

  3. 学习笔记TF019:序列分类、IMDB影评分类

    序列分类,预测整个输入序列的类别标签.情绪分析,预测用户撰写文字话题态度.预测选举结果或产品.电影评分. 国际电影数据库(International Movie Database)影评数据集.目标值二 ...

  4. 使用Windows Server 2012+ 搭建VPN 简单 高效 稳定

    前几天,在机缘巧合之下,买到了一台性能配置一般的腾讯云服务器(香港的),因为性能比较差,没啥太大用途,就想着试试搭建一个VPN,后来,经过多次尝试和查资料,总结出了一套几乎100%成功的教程,现在拿来 ...

  5. Linux下如果忘记了Mysql的root密码该怎么办？

    下面十分简单的办法用来重置密码: 1.编辑MySQL配置文件my.cnf vi /etc/my.cnf #编辑文件,找到[mysqld],在下面添加一行skip-grant-tables [mysql ...

  6. MVC分层含义与开发方式

    真正的服务层是面向数据的,假想一切数据都是从参数获得 控制层是接受页面层数据,再传给服务层,然后将结果返回给页面层的(客户) 页面层是提交格式化的数据的(容易小混乱,无格式,所以要格式化,可以在中间加 ...

  7. python http长连接客户端

    背景: 线上机器,需要过滤access日志,发送给另外一个api 期初是单进程,效率太低,改为多进程发送后,查看日志中偶尔会出现异常错误(忘记截图了...) 总之就是端口不够用了报错 原因: 每一条日 ...

  8. .NET 随记

    1. goto 常用于 switch语句中2. 字符串相加用 StringBuilder的Append()方法性能好3. str.Trim(',') 清除字符串后的","4. st ...

  9. JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能

    本例中敏感词ciku.txt放在C盘根目录下,采用的ActiveXObject插件获取本地文件内容.使用此插件不需网上下插件,直接用如下js代码即可. 浏览器需修改interner安全选项的级别,启用 ...

  10. int a=1,b=~a;请问b的值是多少？

    int a=1,b=~a; 首先计算机中存储的是二进制补码. 把1转为二进制:0000 0001  ->反码  0000 0001 ->补码   0000 0001 ->取反  11 ...