<!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. lombok使用基础教程

    前言 lombok是一个编译级别的插件,它可以在项目编译的时候生成一些代码.在很多工具类的项目中都有这个功能.比如dagger. 通俗的说,lombok可以通过注解来标示生成getter settte ...

  2. redis3.0 集群在windows上的配置（转）

    1. 安装Redis版本:win-3.0.501https://github.com/MSOpenTech/redis/releases页面有,我下载的是zip版本的:Redis-x64-3.0.50 ...

  3. Generator函数异步应用

    转载请注明出处: Generator函数异步应用 上一篇文章详细的介绍了Generator函数的语法,这篇文章来说一下如何使用Generator函数来实现异步编程. 或许用Generator函数来实现 ...

  4. SQL Server 使用问题解答（持续更新中）

    问题一:sql server 2014不允许保存更改,您所做的更改要求删除并重新创建以下表 解答:工具-选项-不勾选组织保存要求重新创建表的更改,如下图确定.

  5. Linq 实例

    1.分页 ).Take(); 2.分组 1)一般分组 //根据顾客的国家分组,查询顾客数大于5的国家名和顾客数var 一般分组 = from c in ctx.Customers group c by ...

  6. 免费空间上的mysql数据库怎么连接？

    我申请了一个php的免费空间,空间有带mysql数据库,可是我不知道怎么连接. 平时在本地做php时我都是怎么连接的 可是现在到空间上了我就不知道怎么连接了.空间有提供phpmyadmin 会的教一下 ...

  7. window.history.go(-1)返回且刷新页面

    windows窗口对象(历史)history.go(),history.back(),history.forward(). 因为windows对象引用不是必须的.所以windows.history.g ...

  8. NodeJS、NPM安装配置与测试步骤(windows版本)

    1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的"INS ...

  9. dede的pagelist标签的listsize数字属性详解

    转载▼http://blog.sina.com.cn/s/blog_a4f3bd4e01012c8n.html dede的pagelist标签的listsize数字属性详解.见远seo经常用织梦搭建各 ...

  10. php 抽奖概率 随机数

    <?php $prize_arr = array( '0' => array('id' => 1, 'title' => 'iphone5s', 'v' => 5), ' ...