<!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. angularjs里重要的route

    写一段代码来解释吧! <!DOCTYPE html><html ng-app="mainApp"><head lang="en"& ...

  2. SSH实现无密码验证登录

    http://blog.csdn.net/houqd2012/article/details/8544517

  3. es6之Generator

    1.Generator函数其实是一个封装了多个内部状态的状态机,执行它会返回一个遍历器对象,然后可以依次遍历Generator中的每一个状态,也就是分段执行,yield是暂停执行的标记,next恢复执 ...

  4. Embedding R-generated Interactive HTML pages in MS PowerPoint（转）

    Usually when I create slide decks these days I used markdown and slidy.  However, I recently was ask ...

  5. 【2017-05-30】WebForm文件上传

    用 FileUpload控件进行上传文件. <asp:FileUpload ID="FileUpload1"  runat="server" /> ...

  6. Mac下将ISO写入U盘镜像

    在Mac下面如果想做一个启动U盘,确实不如windows下那么方便,Windows下面有ultraiso+王涛,Mac下面测可以用下面的办法. 打开磁盘工具 插入U盘,并在磁盘工具里面找到U盘,把它卸 ...

  7. Spring学习（13）--- 基于Java类的配置Bean 之 @Configuration & @Bean注解

    基于Java配置选项,可以编写大多数的Spring不用配置XML,但有几个基于Java的注释的帮助下解释.从Spring3.0开始支持使用java代码来代替XML来配置Spring,基于Java配置S ...

  8. HTML5 Web Worker简单使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  9. KVM之Live Migration

    1.安装KVM必要的软件包 #sudo apt-get install qemu-kvm bridge-utilus 2.制作虚拟机映像ubuntu-12.04.qcow2 $qemu-img cre ...

  10. python大规模爬取京东

    python大规模爬取京东 主要工具 scrapy BeautifulSoup requests 分析步骤 打开京东首页,输入裤子将会看到页面跳转到了这里,这就是我们要分析的起点 我们可以看到这个页面 ...