<!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. 在windows下详解：大端对齐和小端对齐

    计算机的内存最小单位是什么?是BYTE,是字节.一个大于BYTE的数据类型在内存中存放的时候要有先后顺序. 高内存地址放整数的高位,低内存地址放整数的低位,这种方式叫倒着放,术语叫小端对齐.电脑X86 ...

  2. 开始使用 HBuilder 和 Mui - 1 - 分析 index.html ;

    转自:http://ask.dcloud.net.cn/article/240 好吧,在比较了 Codenameone 和 HBuilder 以后,俺反复考虑后,终于还是决定使用 HBuilder 这 ...

  3. 利用object.defineProperty实现数据与视图绑定

    如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...

  4. 关于keil5使用注意事项（预定义、路径包含）

    2017.12.17  下午 终于在不用keil5自带添加库的基础上0 error的新建了一个工程.磕磕绊绊搞了快一个下午,各种小问题搞到崩溃. 首先是库文件添加路径的问题 ,只要是你工程中用到的头文 ...

  5. Linux 将本地文件上传Linux服务器, 即ssh 命令上传本地文件

    利用ssh传输文件   在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件 scp username@servername:/path/filename /var/www ...

  6. 每天一个linux命令（34）：du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  7. 查询A、B表中，A表中B表没有的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  8. 使用Flink的SavePoint功能

    Flink通过SavePoint功能可以做到程序升级后,继续从升级前的那个点开始执行计算,保证数据不中断. Flink中CheckPoint用于保存状态,是自动执行的,SavePoint是指向Chec ...

  9. 【编程技巧】NSTimer类的使用

    创建一个 Timer + scheduledTimerWithTimeInterval: invocation: repeats: + (NSTimer *)scheduledTimerWithTim ...

  10. winform webbrowser如何强制使用ie11内核？

    webkit.net ,cefsharp,openwebkit.net等这些基于谷歌或者基于firfox内核的浏览器有个共同点,就是必须指定winform为x86的才能使用, 而且使用过程中也是各种坑 ...