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. Web API中的内容协商

    一.内容协商的概念 HTTP规范将内容协商定义为“当有多个格式可用时为给定响应选择最佳格式的过程”.HTTP中内容协商的主要机制是这些请求标头: Accept:响应可接受哪些媒体类型,例如“appli ...

  2. sql关联更新

    /****** Script for SelectTopNRows command from SSMS ******/SELECT * FROM [LFBMP.Operating].[dbo].[Sh ...

  3. I/O exception (java.net.SocketException) caught when processing request: Connect

    Exception [一个故障引发的话题] 最近,项目中的短信模块收到一个故障日志,要求我协助调查一下: 2010-05-07 09:22:07,221 [?:?] INFO  httpclient. ...

  4. 简:Spring中Bean的生命周期及代码示例

    (重要:spring bean的生命周期. spring的bean周期,装配.看过spring 源码吗?(把容器启动过程说了一遍,xml解析,bean装载,bean缓存等)) 完整的生命周期概述(牢记 ...

  5. java操作数据库:分页查询

    直接上.... 还是用之前的goods表,增加了一些数据 1.实体类Goods // 封装数据 public class Goods { private int gid; private String ...

  6. Linux查看版本信息

    查看Linux版本以及是32位还是64位 查看版本 一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@S-CentOS home]# cat /proc ...

  7. web 安全知识点

    XSS 新手指南:DVWA-1.9全级别教程(完结篇,附实例)之XSS https://www.jianshu.com/p/303206ae2471 https://www.netsparker.co ...

  8. 前端面试(二):N轮面试

    一面 在一面中要掌握什么技巧,主要考察前端开发的基础知识 1.面试技巧.页面布局类 页面布局小结: 语义化掌握到位 页面布局理解深刻 CSS基础知识扎实 思维灵活且积极上进 代码书写规范 2.CSS盒 ...

  9. mysql 修改文件记录:

    增:  insert  t1(id, name) values(1, "alex"), (2, "wusir"), (3, "dabing" ...

  10. Grouping ZOJ - 3795 (tarjan缩点求最长路)

    题目链接:https://cn.vjudge.net/problem/ZOJ-3795 题目大意:给你n个人,m个关系, 让你对这个n个人进行分组,要求:尽可能的分组最少,然后每个组里面的人都没有关系 ...