基本思路,先画一个200半径的圆

ctx.arc(250,250,200,0,2*Math.PI);

然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转

             //画12个时刻度线
2 for(var i=0;i<12;i++){
3 ctx.save();
4 ctx.translate(250,250);
5 ctx.rotate(i*Math.PI/6);
6 ctx.moveTo(0,-180);
7 ctx.lineTo(0,-195);
8 ctx.stroke();
9 ctx.restore();
10 }
11 //画60个分刻度线
12 for(var i=0;i<60;i++){
13 //经过时刻度跳过
14 if(i%5!=0){
15 ctx.save();
16 ctx.translate(250,250);
17 ctx.rotate(i*Math.PI/30);
18 ctx.beginPath();
19 ctx.strokeStyle="#555";
20 ctx.moveTo(0,-190);
21 ctx.lineTo(0,-195);
22 ctx.closePath();
23 ctx.stroke();
24 ctx.restore();
25 }
26 }

需要注意,在画刻度线时要用到save()和restore()

save()是保存原始的坐标,经过变换坐标后画刻度线,再restore()回到原始坐标。不然的话,每一次坐标变化都是基于前一次的坐标。

再利用date()函数获取当前时间,得到时/分/秒,分别计算指针的相应角度,利用rotate旋转。

一开始用Math计算各指针的两端坐标,再画指针,发现需要考虑落在各象限的正负值,很烦,直接rotate旋转,太简单了。

画时针

//画时针
ctx.save();
ctx.translate(250,250);
ctx.rotate(hour/12*2*Math.PI);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-150);
ctx.closePath();
ctx.stroke();
ctx.restore();

完整代码

<html>
<head>
<title>canvas demo</title>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px" ></canvas>
<script type="text/javascript">
drawclock();
setInterval(drawclock,1000);
function drawclock(){
var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
ctx.clearRect(0,0,500,500);
//画圆圈
ctx.beginPath();
ctx.lineWidth=5;
ctx.beginPath();
ctx.arc(250,250,200,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(250,250,5,0,2*Math.PI);
ctx.closePath();
ctx.stroke();
//画12个时度线
for(var i=0;i<12;i++){
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*Math.PI/6);
ctx.beginPath();
ctx.moveTo(0,-180);
ctx.lineTo(0,-195);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
//画60个分度线
for(var i=0;i<60;i++){
//经过时度跳过
if(i%5!=0){
ctx.save();
ctx.translate(250,250);
ctx.rotate(i*Math.PI/30);
ctx.beginPath();
ctx.strokeStyle="#555";
ctx.moveTo(0,-190);
ctx.lineTo(0,-195);
ctx.closePath();
//context.globalCompositeOperation='xor';
ctx.stroke();
ctx.restore();
}
}
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour=hour>12?hour-12:hour;
hour=hour+min/60; //画时针
ctx.save();
ctx.translate(250,250);
ctx.rotate(hour/12*2*Math.PI);
ctx.beginPath();
ctx.moveTo(0,15);
ctx.lineTo(0,-150);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.translate(250,250);
ctx.rotate(min/60*2*Math.PI);
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(0,20);
ctx.lineTo(0,-170);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画分针
ctx.save();
ctx.translate(250,250);
ctx.rotate(sec/60*2*Math.PI);
ctx.lineWidth=1;
ctx.beginPath();
ctx.moveTo(0,25);
ctx.lineTo(0,-180);
ctx.closePath();
ctx.stroke();
ctx.restore();
} </script>
<style>
#mycanvas{
border: solid 1px;
}
</style> </body>
</html>

canvas案例——画时钟的更多相关文章

  1. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. canvas画时钟,重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  3. canvas 画时钟 会动呦

    //半径 var r = 130; //重置原点 ctx.save(); ctx.translate(400, 500); //使用translate重置原点 function drawClock() ...

  4. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  5. 通过H5的新标签canvas做出一个时钟的全过程,希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  6. canvas实现的时钟效果

    最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

  7. canvas做的时钟,学习下

    canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext(" ...

  8. canvas绘制表盘时钟

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

随机推荐

  1. centos 6x系统下源码安装mysql操作记录

    在运维工作中经常部署各种运维环境,涉及mysql数据库的安装也是时常需要的.mysql数据库安装可以选择yum在线安装,但是这种安装的mysql一般是系统自带的,版本方面可能跟需求不太匹配.可以通过源 ...

  2. HTTP状态码对应

    HTTP的状态码 对于状态码大家如果经常在线买东西就能知道,我们买了东西就会有个订单状态:出库.发货中.送达中.送达等,其实这些状态就是状态码,只不过这些状态码都是文字.HTTP 响应的时候也有状态码 ...

  3. ThinkPHP常用查询

    1.常规 $map2['state'] = 1; $User->where ( $map2 )->find(); 2. OR 查询 $where['name'] = array('neq' ...

  4. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - .NET商业化成品成熟各种数据权限的需求对应例子代码

    还是我上次提出的那个问题问题:假设一个订单表,1.角色A可以看自己的2.角色B可以看工作组的3.角色C可以看金额是1000元以下的(自定义条件是否可行?如果可以,请详细说明)4.角色D可以看整个部门的 ...

  5. IIS7注册本机模块

    问题描述:打开mp4文件要映射给mod_h264_streaming.dll(http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Intern ...

  6. Python学习Day2笔记(集合和文件操作)

    1.集合的使用 列表是有序的可包含重复内容的 集合是无序的不可包含重复内容的 1) 集合关系测试 #列表去重list_1=[1,4,5,6,7,8,9,7,5,4,23,2] #有重复数据 list_ ...

  7. Qt——一些工具的使用

    一.使用Qt需要安装哪些软件 如果不使用VS,那么只需Qt组件就行了,安装完成后使用QtCreator进行编程. 如果使用VS,则需要安装下面几个: 1.Visual Studio 2.Qt组件 3. ...

  8. bzoj1800[Ahoi2009]fly 飞行棋 暴力枚举

    找了道bzoj的水题,千年难得一遇. 建议初学者做做,然而我个蒟蒻初学时应该A不了..... < http://www.lydsy.com/JudgeOnline/problem.php?id= ...

  9. 【转】一些 SQLite技巧

    部分来源于网络 SQLite 删除重复行 需求:现存在一张表tender_to_detailedlist,然后里面的列tender_id和detailedlist_id具有相同的数据且不确定相同数据的 ...

  10. 即使用ADO.NET,也要轻量级实体映射,比Dapper和Ormlite均快

    不管出于什么原因,有时候框架人员摒弃了NH或EF,而使用原生数据库访问对象. 为了优美的编程,用上我写的轻量级映射扩展方法吧 目的:将SqlDataReader自动转换成T类型 代码如下: /// & ...