<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
setInterval("draw()",1000);
}
function draw(){
var radius = Math.min(canvas.width/2,canvas.height/2)-25; //表盘半径
var cx = canvas.width/2;
var cy = canvas.height/2;
context.save(); //保存当前绘制的时钟
context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = '#fff';
context.strokeStyle = '#f00';
context.beginPath();
context.arc(cx,cy,radius,0,Math.PI*2,true); //true逆时针
context.fill();
context.stroke();
context.closePath();//关闭路径一般不需要，因为开始下一个路径就自动关闭上一个路径
context.restore();
var r = radius-10;
context.font = 'bold 16px 微软雅黑';
function Drawtext(text,x,y){
context.save();
x -=(context.measureText(text).width/2);//返回文字的宽度
y+=9;
//数字任意
context.beginPath();
// context.translate(x,y);平移笔尖可以直接省略
context.fillText(text,x,y);
context.restore();
}

Drawtext('1', cx + (0.5 * r), cy - (0.88 * r));
Drawtext('2', cx + (0.866 * r), cy - (0.5 * r));
Drawtext('3', cx + radius - 10,cy);
Drawtext('4', cx + (0.866 * r), cy + (0.5 * r));
Drawtext('5', cx + (0.5 * r), cy + (0.866 * r));
Drawtext('6', cx, cy + r);
Drawtext('7', cx - (0.5 * r), cy + (0.866 * r));
Drawtext('8', cx - (0.866 * r), cy + (0.49 * r));
Drawtext('9', cx - radius + 10, cy);
Drawtext('10',cx - (0.866 * r),cy - (0.50 * r));
Drawtext('11', cx - (0.51 * r), cy - (0.88 * r));
Drawtext('12', cx, 35);
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var a = ((h/12)*Math.PI*2)-1.57+((m/60)*0.524);//0.524为一个大格（小时）所对应的deg,-1.57:1.57为三个大格，因为绘制时在3点处绘制，但计算时间时是从12开始。
context.save();//
context.fillStyle = 'white';
context.beginPath();
context.arc(cx,cy,3,0,Math.PI*2,false);
context.closePath();
context.fill();
context.lineWidth=3;
context.fillStyle = 'skyblue';
context.strokeStyle = 'skyblue';
context.beginPath();
context.arc(cx,cy,radius-95,a+0.001,a,true);//要绘制圆弧必须有弧度差，时钟指针
context.lineTo(cx,cy); //画线。否则只有点，时钟的线会消失
context.arc(cx,cy,radius-50,((m/60)*6.28)-1.57,((m/60)*6.28)-1.57,false);//分钟时针
context.lineTo(cx,cy); //画线。否则只有点，时钟的线会消失
context.arc(cx,cy,radius-30,((s/60)*6.28)-1.57,((s/60)*6.28)-1.57,false); //秒针指针
context.lineTo(cx,cy);
context.closePath();
context.fill();
context.stroke();
context.restore(); //
var hours = String(h);
var minutes = String(m);
var seconds = String(s);
if(hours.length == 1){h = '0'+h}
if(minutes.length == 1){m = '0'+m}
if(seconds.length == 1){s = '0'+s}
var str = h+':'+m+':'+s;
Drawtext(str,cx,cy+radius+12);
}

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

canvas.save( )：用来保存Canvas的状态

- canvas.restore( )：用来恢复Canvas旋转、缩放等之后的状态，当和canvas.save( )一起使用时，恢复到canvas.save( )保存时的状态。

canvas绘制时钟及注释及save和restore的用法的更多相关文章

  1. 使用canvas绘制时钟

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

  2. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  3. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  4. HTML5 之Canvas 绘制时钟 Demo

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

  5. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  6. 用canvas绘制时钟

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

  7. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  8. canvas 中save和restore的用法

    在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会 ...

  9. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

随机推荐

  1. iOS扩展——Objective-C开发编程规范

    最近准备开始系统学习一个完整项目的开发流程和思路,在此之前,我们需要对iOS的开发变成规范进行更系统和详尽的学习,随意对编程规范进行了整理和学习.本文内容主要转载自:Objective-C-Codin ...

  2. ASP.NET没有魔法——ASP.NET OAuth、jwt、OpenID Connect

    上一篇文章介绍了OAuth2.0以及如何使用.Net来实现基于OAuth的身份验证,本文是对上一篇文章的补充,主要是介绍OAuth与Jwt以及OpenID Connect之间的关系与区别. 本文主要内 ...

  3. Spark_总结七_troubleshooting

    转载标明出处 http://www.cnblogs.com/haozhengfei/p/07ef4bda071b1519f404f26503fcba44.html Spark_总结七_troubles ...

  4. 修改nopCommerce中的实体

                               对已有实体增加一个属性(对Category增加一个SomeNewProperty)   最近在研究nopcommerce,这里是对官网上文档的学习 ...

  5. parse_str() 函数把查询字符串解析到变量中。

    注释:如果未设置 array 参数,则由该函数设置的变量将覆盖已存在的同名变量. 注释:php.ini 文件中的 magic_quotes_gpc 设置影响该函数的输出.如果已启用,那么在 parse ...

  6. SSL和SSH有什么区别

    SSL 是一种安全协议,它为网络(例如因特网)的通信提供私密性.SSL 使应用程序在通信时不用担心被窃听和篡改. SSL 实际上 是共同工作的两个协议:"SSL 记录协议"(SSL ...

  7. thinkphp3.2后台模块怎么添加（admin），直接复制Home？还是在入口文件生成？

    1.都可以,复制home改下命名空间也行,在入口添加下参数自动生成也行 2ThinkPHP3.2后支持模块化开发,在Home目录的同级目录下创建一个新的文件夹,命名为Admin,或者就如你自己所说,直 ...

  8. PHPCMS模板里面使用自定义函数

    首先我在/phpcms/libs/functions/extention.func.php里面新增了一个函数 ============================================= ...

  9. As a Start - 毫厘之间,宇宙之外

    序 突然想聊聊多重宇宙——多重宇宙,这听上去像是一个科幻概念,但是严肃思考这一个问题时,将会带我们进入一个全新的格局和世界. 对宇宙学家而言,研究多重宇宙并不仅仅是为了猜测平行世界里某一历史事件是否有 ...

  10. NSMutableArray 记住取不到时要进行强转

    NSMutableArray  记住取不到时要进行强转