<!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. 解析Python中的yield关键字

    前言 python中有一个非常有用的语法叫做生成器,所利用到的关键字就是yield.有效利用生成器这个工具可以有效地节约系统资源,避免不必要的内存占用. 一段代码 def fun(): for i i ...

  2. pycharm中一直跳出updating indices...indexing

    直接比较明显的就是cpu直冲天际. pycharm是一款用了就不愿意换的ide,因为他的功能十分强大,同时也有着让人诟病的问题,就是他功能太全了,以至于有的功能你这辈子可能都不会去触碰,带来的直接问题 ...

  3. HDU 2063 过山车（模板—— 二分图最大匹配问题）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2063  解题思路: 二分图最大匹配模板题. AC代码: #include<stdio.h> ...

  4. [转] 分享一个快的飞起的maven的settings.xml文件

    <?xml version="1.0"?> <settings> <localRepository>/home/yizhen/.m2/repos ...

  5. myeclipse编码

    window --->perferences

  6. id，is的用法，小数据池的概念及编码知识进阶

    一:id 查询内存地址 name = 'alex' print(id(name)) li = [1,2,3] print(id(li)) 二:is  判断的是内存地址 name1 = 'alex@' ...

  7. Lucene.net(4.8.0) 学习问题记录四: IndexWriter 索引的优化以及思考

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  8. Linuxc - gdb调试程序

    指针实现变量交换值 #include <stdio.h> void change(int *a,int *b) { int tmp = *a; *a = *b;// 将指针a所在地址的值, ...

  9. ASP.net core 2.0.0 中 asp.net identity 2.0.0 的基本使用（三）—用户账户及cookie配置

    修改用户账户及cookie配置 一.修改密码强度和用户邮箱验证规则: 打开Startup.cs,找到public void ConfigureServices(IServiceCollection s ...

  10. TemplateMethod-模板模式

    什么是Template Method模式 在父类中定义处理流程的框架,在子类中实现具体处理的模式就称为Template Mehtod模式.模板模式的关键是:子类可以置换掉父类的可变部分,但是子类却不可 ...