<!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. rsync远程同步

    一.概念 Rsync是一个开源的快速备份工具,可以在不同主机之间镜像同步整个目录树,支持增量备份,保持连接和权限,且采用优化的同步算法,传输前执行压缩,因此非常适用于异地备份,镜像服务器等应用.rsy ...

  2. DFB系列 之 SetCooperativeLevel协作级别

    1. 函数原型解析 函数声明 function SetCooperativeLevel(hWnd: HWND; dwFlags: DWORD): HResult; stdcall; 设置指定的IDir ...

  3. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  4. JVM 方法调用之动态分派

    1. 动态分派 一个体现是重写(override).下面的代码,运行结果很明显. public class App { public static void main(String[] args) { ...

  5. 关于Content-Type的问题

    今天我在编写html表单提交到 php时,出现了一个很奇怪的现象. 为了让php文件的字符编码与html一致,我在php文件加了一句 header("Content-Type:html/te ...

  6. JS上了贼船

    本文纯属个人观点,没有引经据典,没有小心求证,just吐槽. 互联网的火热.移动web,带动了前端的飞速发展,js好像搭上了顺风车,身价水涨船高,如日中天. web前端是啥?html + css + ...

  7. 与64位版本的Windows不兼容，masm运行不了

    问题: 在Window64位运行不了的masm 解决方法: 1.下载DosBox0.74(当前最新): 2.安装后运行,运行后出现控制台: 3.在DosBox的控制台下运行 Mount x: x:/m ...

  8. 在R中整理数据

    原始数据一般分散杂乱,并含有缺失和错误值,因此在进行数据分析前首先要对数据进行整理. 一.首先,了解原始数据的结构. 可使用如下函数(归属baseR)来查看数据结构: class(dataobject ...

  9. 源码浅谈(一)：java中的 toString()方法

    前言: toString()方法 相信大家都用到过,一般用于以字符串的形式返回对象的相关数据. 最近项目中需要对一个ArrayList<ArrayList<Integer>> ...

  10. 学习笔记：HTML+CSS 基础知识

    1.<q>标签,短文本引用       <q>引用文本</q> <q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行 ...