基本思路，先画一个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. echo print() print_r() var_dump()的区别

    常用调试方法 echo()可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用. print()函数 ...

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

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

  3. 关于SQL中的排序问题

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...

  4. 如何让tableViewCell的分割线从边框顶端开始

    在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作 -(voi ...

  5. 关于Wireshark "The NPF driver isn’t running……"解决办法

    启动Wireshark软件时出现了如下图所示的错误,就搜索了一下解决方法,特总结如下: 这个错误是因为没有开启NPF服务造成的.简要说一下NPF吧. NPF即网 络数据包过滤器(Netgroup Pa ...

  6. ubuntu16.04装MatConvNet

    按matconvnet官网上的步骤来,编译代码的时候会发现编译失败. 参考这条issues 以下是我的解决方案: I use ubuntu16.04 with x64 architecture. I ...

  7. Docker使用

    Docker使用注意 关于网络配置   在使用默认的桥接模式下,容器启动后会被分配一个与docker0在同一网段的地址,在容器内部默认显示为eth0,在宿主机上产生一个临时的vethXXX接口. 端口 ...

  8. 【Beta】第五次任务发布

    PM #100 日常管理&dev版宣传&设计报告管理后台. 后端 #101 完成收藏功能 完成管理员权限表的生成和接入(按位压缩权限表) 验收条件:收藏功能能够正常使用.能够区分常规用 ...

  9. 通过grep来进行日志分析,grep -C和配合awk实际对catalina.out使用案例

    本文介绍通过grep来进行日志分析,主要介绍grep -C和配合awk实际对catalina.out使用案例 grep可以对日志文件进行筛选,统计,查询,快速定位bug. 首先,你的日志需要比较规范, ...

  10. webmagic 增量爬取

    webmagic  是一个很好并且很简单的爬虫框架,其教程网址:http://my.oschina.net/flashsword/blog/180623 webmagic参考了scrapy的模块划分, ...