基本思路，先画一个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. BZOJ1951[SDOI2010]古代猪文

    Description "在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心--" --选自猪王国民歌 很久 ...

  2. C/C++编程语言学习资料尽收眼底 电子书+视频教程

    Visual C++(VC/MFC)学习电子书及开发工具下载请看这里 史无前例的网络最全最强C/C++资料索引: C/C++编程语言学习资料尽收眼底 电子书+视频教程 VC++/MFC(VC6)开发技 ...

  3. MATLAB常用字符串函数之二

    1,lower和upper lower: 将包含的全部字母转换为小写. upper: 将包含的全部字母转化为大写. 实例一: >>str='Sophia is a good girl.'; ...

  4. Qt——动态库的创建和使用

    一.动态库是什么 很多人写程序的人都见过.lib和.dll文件,对动态库也略有耳闻. 生成动态库后可以得到两个文件,后缀名分别是.lib以及.dll. 简而言之,.lib称为导入库,相当于头文件:.d ...

  5. C#基础系列——小话泛型

    前言:前面两章介绍了C#的两个常用技术:C#基础系列——反射笔记 和 C#基础系列——Attribute特性使用 .这一章来总结下C#泛型技术的使用.据博主的使用经历,觉得泛型也是为了重用而生的,并且 ...

  6. 备忘：maven 中指定版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  7. .NET添加时间戳防止重放攻击

    如过客户端在向服务端接口进行请求,如果请求信息进行了加密处理,被第三方截取到请求包,虽然第三方无法解密获取其中的数据,但是可以使用该请求包进行重复的请求操作.如果服务端不进行防重放攻击,就会参数服务器 ...

  8. 学python

    1.*和** def sum(*x): ans=0 for i in x: ans+=i return ans def haha(one,two): print(one,' ',two) print( ...

  9. 【JavaScript】【CSS】前端规则摘抄

    源:http://zhibimo.com

  10. [MAVEN]一、maven入门之软件的下载及配置到Eclipse中

    1.Maven是什么? maven是Apache.org的一个子项目,他通过一个.pom的文件(xml文件)配置可以下载此项目中需要用到的jar包.文档.源码等.Maven提供了命令行的使用方式,我们 ...