<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
<canvas id="can1" width="500px" height="500px"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('can1');
var cxt=canvas.getContext('2d');
function drawClock(){
cxt.clearRect(0,0,500,500);
var date=new Date()
var m=date.getSeconds();
var j=date.getMinutes();
var k=date.getHours();
//表盘
cxt.beginPath();
cxt.strokeStyle="blue";
cxt.lineWidth="10";
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//表心
cxt.beginPath();
cxt.strokeStyle="#AA1514";
cxt.lineWidth="1";
cxt.arc(250,250,4,0,360,false);
cxt.fill();
cxt.closePath();
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="7";
cxt.translate(250,250);
cxt.rotate(30*i*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="5";
cxt.translate(250,250);
cxt.rotate(6*i*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//画秒针

cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="1";
cxt.translate(250,250);
cxt.rotate(6*m*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-130,3,0,360,false);
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.moveTo(0,12);
cxt.lineTo(0,-160);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="4";
cxt.translate(250,250);
cxt.rotate(6*j*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-150);
cxt.closePath();
cxt.stroke();
cxt.restore();
//时针
cxt.save();
cxt.strokeStyle="black";
cxt.lineWidth="6";
cxt.translate(250,250);
cxt.rotate(30*k*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,8);
cxt.lineTo(0,-140);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

setInterval("drawClock()",1000);

</script>
</body>
</html>

用H5的canvas做时钟的更多相关文章

  1. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  2. canvas做的时钟，学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...

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

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

  4. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  5. canvas实现时钟

    最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...

  6. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  7. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  8. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  9. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

随机推荐

  1. HDU 2544 单源最短路

    题目链接: 传送门 最短路 Time Limit: 1000MS     Memory Limit: 65536K 题目描述 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是 ...

  2. Sublime Text 3 编辑器使用

    今天打开别人的python脚本,想找IDE的时候,本来在eclipse中有安装python插件,但是好像是太旧了,很多sys的方法找不着 又上网找了一下python的IDE工具,看好多人在歌颂这个Su ...

  3. 软件产品案例分析——K米

    第一部分 调研.评价 调研 测试机型:iPhone 6s K米版本:4.3.0 直观感受 界面干净,功能丰富,操作不复杂,易上手 错误类 无法分享KTV主页 步骤:进入KTV主页,点击右上角分享图标 ...

  4. NOIp 0904 出题报告

    T1 huajitree 纯模拟,把S拆成二进制查一下有多少个1,然后把这个数和N*M求一下gcd,除一下输出就好了.说求期望值可能对新高一不太友好…. //huajitree //2016.8.22 ...

  5. POJ 3678 Katu Puzzle（强连通 法）

    题目链接 题意:给出a, b, c 和操作类型 (与或异或),问是否满足所有的式子 主要是建图: 对于 and , c == 1: 说明 a 和 b都是1,那么 0 就不能取, a' -> a ...

  6. ----------jqery和js如何判断checkbox是否选中 --------两个单选按钮如何选一个，且用jquery获取被选的值

    jqery和js如何判断checkbox是否选中 jquery: <div id="divId" class="divTable"> <div ...

  7. ORACLE查看并修改session和连接最大数

    第一步,在cmd命令行,输入sqlplus 第二步,根据提示输入用户名与密码 1. 查看processes和sessions参数 SQL> show parameter processes NA ...

  8. crontab执行脚本中文乱码，手动执行没有问题

    crontab执行脚本中文乱码,手动执行没有问题 产生原因:       这是因为Unix/Linux下使用crontab时的运行环境已经不是用户环境了,因此原本用户下的一些环境变量的设置就失效了.例 ...

  9. easyUI datagrid view扩展

    //扩展easyuidatagrid无数据时显示界面 var emptyView = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender ...

  10. JAVA第三周课后作业

    JAVA课后作业 一.枚举类型 代码: enum Size{SMALL,MEDIUM,LARGE}; public cl ass EnumTest { public static void main( ...