基本思路，先画一个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. codevs 1536 海战

    时间限制: 1 s  空间限制: 256000 KB  题目等级 : 白银 Silver 题目描述 Description 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物, ...

  2. mysql 加锁测试

    今天研究cobar,做执行时间测试,需要对表记录加锁.用了以下两种方式为表记录加锁. 第一种方式: begin;    //开始事务 select * from 表名 ( where ……) for ...

  3. request.getcontextPath() 详解

    request.getcontextPath() 详解 文章分类:Java编程 <%=request.getContextPath()%>是为了解决相对路径的问题,可返回站点的根路径. 但 ...

  4. golang---文件读写

    func Create(name string) (file *File, err error) 直接通过纹面创建文件 func NewFile(fd uintptr, name string) *F ...

  5. winform采集网站美女图片程序---多线程篇

    设定思路: 采集目标: http://www.8kmm.com,   已知网址列表(List保存),  应用多线程(Thread)读取该列表, 获取url时不能重复(加锁Lock). 允许无序采集! ...

  6. maven 打包

    使用命令行形式打包 1.配置maven环境变量,在变量path中加入maven路径. 2.在要打包的项目目录下使用:Ctrl+shift+鼠标右键点击,点击 在此处打开命令行窗口. 在打开的命令行窗口 ...

  7. Matplotlib 学习笔记

    注:该文是上了开智学堂数据科学基础班的课后做的笔记,主讲人是肖凯老师. 数据绘图 数据可视化的原则 为什么要做数据可视化? 为什么要做数据可视化?因为可视化后获取信息的效率高.为什么可视化后获取信息的 ...

  8. Android基础总结（一）

    Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R.java:项目中所有资源文件的资源id Android.jar:Android的jar包,导入此包方可使用 ...

  9. get last dirname/filename in a file path argument

    $ dirname /home/train/00.incipient_data/data_for_gene_prediction_and_RNA-seq/240_rep2.fastq /home/tr ...

  10. CSS-背景渐变的兼容写法

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...