<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background: #000;
}

#c1 {
background: #fff;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oC = document.getElementById('c1');
var oGc = oC.getContext('2d');
// alert(oGc)

function toDraw() {
var x = 200;
var y = 200;
//中心点
var r = 150;
//半径
oGc.clearRect(0, 0, oC.width, oC.height)

// 获取时间
var oDate = new Date();
var oHoure = oDate.getHours();
var oMin = oDate.getMinutes();
var oSon = oDate.getSeconds();
//时针对应的弧度
var oHoureValue = (-90 + oHoure * 30 + oMin / 2) * Math.PI / 180;
//分针对应的弧度
var oMinValue = (-90 + oMin * 6) * Math.PI / 180;
//秒针对应的弧度
var oSonValue = (-90 + oSon * 6) * Math.PI / 180;
oGc.beginPath();
for(var i = 0; i < 60; i++) {
oGc.moveTo(x, y);
oGc.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
}
oGc.closePath();
oGc.stroke();

//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();

oGc.lineWidth = 3;
oGc.beginPath();
for(var i = 0; i < 12; i++) {
oGc.moveTo(x, y);
oGc.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
}
oGc.closePath();
oGc.stroke();

//画白色的覆盖
oGc.fillStyle = "white";
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 18 / 20, 0, 360 * Math.PI / 180, false)
oGc.closePath();
oGc.fill();

//时针
oGc.lineWidth = 5;

//分割单独的区间
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 10 / 20, oHoureValue, oHoureValue, false)
oGc.closePath();
oGc.stroke();

//分针
oGc.lineWidth = 3;
oGc.beginPath();

oGc.moveTo(x, y);
oGc.arc(x, y, r * 14 / 20, oMinValue, oMinValue, false)
oGc.closePath();
oGc.stroke();

//秒针
oGc.lineWidth = 2;
oGc.beginPath();
oGc.moveTo(x, y);
oGc.arc(x, y, r * 19 / 20, oSonValue, oSonValue, false)
oGc.closePath();
oGc.stroke();
}

setInterval(toDraw, 1000)

toDraw();
}
</script>
</head>

<body>
<canvas id="c1" width="400" height="400"></canvas>
</body>

</html>

问题：在实现 时针 分针 秒针都需要分离单独的空间 ,在开启定时器时注意要清空画布（"会累加"），注意角度 ，弧度之间的转化

canvas 画钟表的更多相关文章

  1. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  2. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  3. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  4. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  5. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  6. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  7. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  9. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. 为什么大多数培训机构还停留在只教ssh框架？

    最近听一些朋友说,招聘面试的很多人简历都差不多,大部分人的简历上面都写了熟悉ssh框架,我朋友就在吐槽,为什么这些人简历都差不多,并且都熟悉ssh框架? 后面他说, 可能这些人都是培训机构出来的, 然 ...

  2. 局域网内补丁更新80072EE2错误

    在公网中,80072ee2通常是在进行自动更新时遇到的连接性错误.通常由于三防杀毒软件或者浏览器,代理服务器设置不正确而导致的.那么如果是在局域网中遇到该问题,该如何解决呢? 错误截图: 1.首先确认 ...

  3. Angularjs快速入门（一）

    这系列是看<用angularjs开发下一代web应用>的笔记. angular也接触几个月,总觉得不甚明白,写起来总是不那么如意.希望这本书看完了可以改变现在的状况.好了废话不多说开始: ...

  4. Hadoop集群

    你可以用以下三种支持的模式中的一种启动Hadoop集群: 单机模式 伪分布式模式 完全分布式模式 单机模式的操作方法 默认情况下,Hadoop被配置成以非分布式模式运行的一个独立Java进程.这对调试 ...

  5. POJ1006: 中国剩余定理的完美演绎（非原创）

    问题描述 人自出生起就有体力,情感和智力三个生理周期,分别为23,28和33天.一个周期内有一天为峰值,在这一天,人在对应的方面(体力,情感或智力)表现最好.通常这三个周期的峰值不会是同一天.现在给出 ...

  6. 实现javascript下的模块组织

    前面的话 java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5 ...

  7. 使用WebGL加载Google街景图

    我们要实现的功能比较简单:首先通过坐标定位.我的位置.地址搜索等方式,调用google map api获取地址信息.然后根据地址信息中的全景信息获取当前缩放级别的全景信息.最终把这些全景信息通过Web ...

  8. [刷题]算法竞赛入门经典(第2版) 6-6/UVa12166 - Equilibrium Mobile

    题意:二叉树代表使得平衡天平,修改最少值使之平衡. 代码:(Accepted,0.030s) //UVa12166 - Equilibrium Mobile //Accepted 0.030s //# ...

  9. Nginx安装lua支持

    Nginx安装lua支持 需要LuaJIT-2.0.4.tar.gz,ngx_devel_kit,lua-nginx-module 1.下载安装LuaJIT-2.0.4.tar.gz wget -c ...

  10. NIO Socket编程实例

    1.阻塞模式实例 NIOUtil类,用来通过SOcket获取BufferedReader和PrintWriter. package IO; import java.io.BufferedReader; ...