<!doctype html>
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id = "clock" width = "500px" height = "500px">
您的浏览器已过时,请更新!
</canvas>
<script type = "text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d"); function drawClock(x) {
var y = x / 2;
var r = (x - 100) / 2;
var x1 = r - 10;
var x2 = r - 20;
var x3 = r - 30;
var x4 = r - 40;
var x5 = r - 50;
//清除画布
cxt.clearRect(0, 0, x, x); var now = new Date;
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours(); //解决时针的问题:1、小时之间 2、19:59:30s
hour += min / 60;
hour = hour > 12 ? hour - 12 : hour; //表盘
cxt.lineWidth = 10;
cxt.strokeStyle = "blue";
cxt.beginPath();
cxt.arc(y, y, r, 0, 360, false);
cxt.closePath();
cxt.stroke();
//时刻度
for (var i = 0; i < 12;i++ ) {
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(i*30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x1);
cxt.lineTo(0, -x3);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for (var i = 0; i < 60; i++) {
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(i * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x1);
cxt.lineTo(0, -x2);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x5);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(min * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x4);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "red";
cxt.translate(y, y);
cxt.rotate(sec * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x3);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
cxt.lineWidth = 3;
cxt.strokeStyle = "red";
cxt.beginPath();
cxt.arc(0, 0, 5, 0, 360, false);
cxt.fillStyle = "gray";
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.lineWidth = 3;
cxt.strokeStyle = "red";
cxt.fillStyle = "red";
cxt.beginPath();
cxt.arc(0, -x5, 5, 0, 360, false);
cxt.fill();
cxt.closePath();
cxt.stroke();
cxt.restore();
} //行走
drawClock(500);
setInterval("drawClock(500)", 1000);
</script>
</body>
</html>

html5 canvas js(时钟)的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  3. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  4. html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

  5. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  6. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  9. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

随机推荐

  1. jqgrid的search

    2015-04-19 本人近期的博客都是和之前的随笔相关联的. 今天想和大家分享的是jqgrid中的search. 相信大家写代码用到jqgrid的时候都可能会在jqgrid中涉及查询,其实查询和 增 ...

  2. inux redis 安装配置, 以及redis php扩展

    一,什么是redis redis是一个key-value存储系统. 和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset ...

  3. RAC集群节点故障模拟测试

    RAC节点故障模拟测试 重启单个RAC 节点模拟测试模拟操作步骤使用shutdown –Fr的方式重启节点,查看系统反应和数据库重新启动的时间.预期测试结果重启单个节点,vip将会切换到另外一个节点. ...

  4. linux系统web项目运行环境搭建

    允许本地访问端口:iptables -P OUTPUT ACCEPT MySQL数据库安装1.yum install mysql 2.yum install mysql-server 3.删除MySQ ...

  5. 搭建一个SSM框架

    刚好学完springMVC,mybatis简单的组合,总结一下 1.创建一个maven项目,引入jar包 一共这么多,除了oracle jar包是我手动添加到lib里,其他都是通过pom.xml引入的 ...

  6. tinypng的python批量压缩图片功能

    tinypng网站提供的图片压缩功能很不错,但是直接在网站上压缩有限制,大量压缩图片时比较麻烦,还好官方提供了很多脚本的自动化压缩接口.下面简单说下python批量压缩步骤. 1.申请api key ...

  7. A1261. happiness(吴确)[二元组暴力最小割建模]

    A1261. happiness(吴确) 时间限制:500ms   内存限制:512.0MB   总提交次数:158   AC次数:72   平均分:56.71   将本题分享到:        查看 ...

  8. 记一次Project插件开发

    一.开发背景 最近在使用微软的Office Project 2010 进行项目管理,看到排的满满的计划任务,一个个地被执行完毕,还是很有成就感的.其实,不光是在工作中可以使用Project进行项目进度 ...

  9. getComputedStyle获取css属性与IE下的currentStyle获取到的值不同

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  10. Angular ui-route的用法

    ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性,嵌套路由功能主要是依赖$stateProvider服务, ...