Demo : Demo

Demo截图：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 <style>

     *{ margin:0;padding:0; }

     body,html{width:100%;height:100%; overflow:hidden; min-width: 800px;min-height:800px;}

     canvas{ background-color: #fff; padding:0;}

 </style>

 <script>

     window.onload = function(){

         var oCanvas = document.getElementById('canvas');

         var oCtx = oCanvas.getContext('2d');

         var winWidth = document.body.clientWidth;

         var winHeight = document.body.clientHeight;

         var oBody = document.getElementsByTagName('body')[0];

         var propX = propY = 0;

         var timer = null;

         var X = 300;

         var Y = 300;

         oCanvas.setAttribute('width',winWidth);

         oCanvas.setAttribute('height',winHeight);

         setTime();

         timer = setInterval(setTime,1000);

         //设置时间方法;

         function setTime(){

             winWidth = document.body.clientWidth;

             winHeight = document.body.clientHeight;

             var myDate  = new Date(),

                 seconds = myDate.getSeconds(),

                 minutes = myDate.getMinutes() + seconds/60,

                 hours   = myDate.getHours() + minutes/60;    

             oCtx.clearRect(0,0,winWidth,winHeight);

             //画底层3分针小刻度;

             oCtx.save();

                 oCtx.beginPath();

                 for( var i=0,len=60;i<=len;i++ ){

                     oCtx.arc(X,Y,200,0,Math.PI/180*i*6,false);

                     oCtx.lineTo(X,Y);

                     oCtx.stroke();

                     oCtx.strokeStyle = '#000';

                     oCtx.lineWidth = 2;

                 }

                 oCtx.closePath();

             oCtx.restore();

             //画盖住的底层的白圆;

             oCtx.save();

                 oCtx.beginPath();

                 oCtx.arc(X,Y,190,0,2*Math.PI);

                 oCtx.fillStyle="#fff";

                 oCtx.fill();

                 oCtx.closePath();

             oCtx.restore();

             oCtx.save();

                 oCtx.beginPath();

                 for( var i=0,len=12;i<=len;i++ ){

                     oCtx.arc(X,Y,200,0,Math.PI/180*i*30,false);

                     oCtx.lineTo(X,Y);

                     oCtx.stroke();

                     oCtx.strokeStyle = '#000';

                     oCtx.lineWidth = 4;

                 }

                 oCtx.closePath();

             oCtx.restore();

             //画底层时针的大刻度;

             oCtx.save();

                 oCtx.beginPath();

                 oCtx.arc(X,Y,183,0,2*Math.PI);

                 oCtx.fillStyle="#fff";

                 oCtx.fill();

                 oCtx.closePath();

             oCtx.restore();

             //画盖住的底层的白圆;

             oCtx.save();

                 oCtx.arc(X,Y,183,0,2*Math.PI);

                 oCtx.fillStyle="#fff";

                 oCtx.fill();

             oCtx.restore();

             //填充数字;

             oCtx.save();

                 var r = 160;

                 for( var i=1,len=12;i<=12;i++ ){

                     oCtx.font = "40px Microsoft yahei";

                     oCtx.textAlign='center';

                     oCtx.textBaseline='middle';

                     var x = Math.sin( i*360/12*Math.PI/180 )*r + X;

                     var y = -Math.cos( i*360/12*Math.PI/180 )*r + Y;

                     oCtx.fillText(i,x,y,40);

                 }

             oCtx.restore();

             //画时针;

             oCtx.save();

                 oCtx.lineCap="round";

                 oCtx.lineWidth = 8;

                 oCtx.strokeStyle = "#000" ;

                 oCtx.translate(X,Y);

                 oCtx.rotate(hours*30*Math.PI/180);

                 oCtx.beginPath();

                 oCtx.moveTo(0,-80);

                 oCtx.lineTo(0,10);

                 oCtx.stroke();

                 oCtx.closePath();

             oCtx.restore();

             //分时针;

             oCtx.save();

                 oCtx.lineCap="round";

                 oCtx.lineWidth = 6;

                 oCtx.strokeStyle = "#000" ;

                 oCtx.translate(X,Y);

                 oCtx.rotate( minutes*6*Math.PI/180 );

                 oCtx.beginPath();

                 oCtx.moveTo(0,-120);

                 oCtx.lineTo(0,10);

                 oCtx.stroke();

                 oCtx.closePath();

             oCtx.restore();

             //画分针;

             oCtx.save();

                 oCtx.lineCap="round";

                 oCtx.lineWidth = 2;

                 oCtx.strokeStyle = "red" ;

                 oCtx.translate(X,Y);

                 oCtx.rotate( seconds*6*Math.PI/180 );

                 oCtx.beginPath();

                 oCtx.moveTo(0,-160);

                 oCtx.lineTo(0,10);

                 oCtx.stroke();

                 oCtx.closePath();

             oCtx.restore();

             //画盖住的底层的白圆;

             oCtx.save();

                 oCtx.arc(X,Y,15,0,2*Math.PI);

                 oCtx.fillStyle="#000";

                 oCtx.fill();

             oCtx.restore();

             oCtx.save();

                 oCtx.beginPath();

                 oCtx.arc(X,Y,200,0,2*Math.PI,true);

                 oCtx.stroke();    

                 oCtx.closePath();

             oCtx.restore();

         }

         oCanvas.onmousedown = function( event ){

             var ev = window.event || event;

             var btn = false;

             if( oCtx.isPointInPath( ev.clientX , ev.clientY ) ){

                 var yuanX = X;

                 var yuanY = Y;

                 var disX = ev.clientX;

                 var disY = ev.clientY;

                 btn = true;

             }

             document.onmousemove = function( event ){

                 var ev = window.event || event;

                 if( btn ){

                     clearInterval(setTime);

                     var lastX = ev.clientX - disX;

                     var    lastY = ev.clientY - disY;

                     X = lastX + yuanX;

                     Y = lastY + yuanY;

                     if( X <= 200 ){

                         X = 200;

                     }

                     if( X >= winWidth - 200 ){

                         X = winWidth - 200;

                     }

                     if(  Y <= 200  ){

                         Y = 200;

                     }

                     if( Y >= winHeight - 200 ){

                         Y = winHeight - 200;

                     }

                     setTime();

                 }    

             }

         }

         oCanvas.onmouseup = function(){

             btn = false;

             document.onmousemove = null;

             timer = setInterval(setTime,1000);

         }

         window.onresize = function(){

             var bodyWidth = document.body.clientWidth;

             var bodyHeigth = document.body.clientHeight;

             propX = bodyWidth / winWidth;

             propY = bodyHeigth / winHeight;

             if( X >= bodyWidth - 200  ){

                 X = X * propX;

             }

             if( Y >= bodyHeigth - 200 ){

                 Y = Y * propY;

             }

             winWidth = bodyWidth;

             winHeight = bodyHeigth;

             oCanvas.setAttribute('width',winWidth);

             oCanvas.setAttribute('height',winHeight);

         }

     }

 </script>

 </head>

 <body>

     <canvas id="canvas"></canvas>

 </body>

 </html>

后记:

其实网上好多这种画表的也没啥可说的就是css3那个差不多。。。

主要是写拖拽让我费点了功夫 isPointInPath() 这个方法是判断点点击是否在画图上但是只是最后一次绘画上面，

所以偷巧在整个表都画完的最后在画了一个空圆做这个isPointInPath()用，剩下就跟Dom拖拽基本一样了。

不过还是有点小bug 就是 在放大缩小浏览器的时候 绘制的圆心点的X、Y坐标可能不对，虽然我用了比例去算这个 但还是有点小问题，没有想出好的解决办法，有知道怎么解决谢谢告知。。。。 　　

canvas - 钟表的更多相关文章

  1. canvas钟表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html5 canvas 钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

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

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

  5. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  6. [Canvas]新版箴言钟表

    动态效果点此下载用浏览器打开观看. 本作Github地址:https://github.com/horn19782016/12MaximClock 图例: 代码: <!DOCTYPE html& ...

  7. Canvas基础——钟表绘制

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

  8. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  9. HTML5 Canvas 画钟表

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

随机推荐

  1. [NIO-4]选择器

    选择器 最后,我们探索一下选择器.由于选择器内容比较多,所以本篇先偏理论地讲一下,后一篇讲代码,文章也没有什么概括.总结的,写到哪儿算哪儿了,只求能将选择器写明白,并且将一些相对重要的内容加粗标红. ...

  2. uva11916 Emoogle Grid （BSGS）

    https://uva.onlinejudge.org/external/119/p11916.pdf 令m表示不能染色的格子的最大行号 设>m行时可以染k种颜色的格子数有ck个,恰好有m行时可 ...

  3. [Android] Android : lambda expressions are not supported at this language level（需设置project language level）

    最近在Github上下载一个别人的开源项目 ,里面用到了Javajdk1.8的新特性:Lambda 表达式.而我用的Android studio发现不能用这个Lambda 表达式. 本地环境: And ...

  4. React Native的语法之ES5和ES6

    原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...

  5. Struts2的JSON插件

    扎心了,老铁~这依然是一个注册. 1.reg.jsp <%@page contentType="text/html; charset=utf-8"%> <!DOC ...

  6. Vertica系列: Vertica DB连接负载均衡

    背景 谈到负载均衡, 对于数据库集群需要区分几个概念: 运算的负载均衡, Vertica 本身是 MPP 数据库, SQL 操作自动会利用多台机器来加快处理速度. 数据库连接的负载均衡, Vertic ...

  7. opencv实现坐标旋转（教你框住小姐姐）

    一.项目背景 最近在做一个人脸检测项目,需要接入百度AI的系统进行识别和检测.主要流程就是往指定的URL上post图片上去,之后接收检测结果就好了. 百度的检测结果包含这样的信息: left - 人脸 ...

  8. 九、文件IO——案例构建标准库

    例子如下: mystdio.h #ifndef __MYSTDIO_H__ #define __MYSTDIO_H__ #include <sys/types.h> #define MYE ...

  9. [C++]四分树(Quadtrees)

    [本博文非博主原创,思路与题目均摘自 刘汝佳<算法竞赛与入门经典(第2版)>] 四分树Quadtrees 一幅图有1024个点, 可以对图平均分成4块, 并且子图也可以再往下分, 直到一个 ...

  10. Java基础_0205: 程序逻辑结构

    使用if语句进行判断 public class TestDemo { public static void main(String args[]) { double score = 90.0; // ...