先给个效果图，我画的比较丑，大家可以自己美化一下，

直接上代码：

<!DOCTYPE html>

<meta charset="utf-8">

<html>

   <body>

   	  <canvas  width="500" height="500" id="clock" >

   	         您的浏览器不支持canvas

   	  </canvas>

   	  <script>

           //获取画布

           var clock=document.getElementById('clock');

           //设置绘图环境

           var cxt=clock.getContext('2d');  

       function drawClock(){

       	   //清除画布

       	   cxt.clearRect(0,0,500,500);

           //获取时间，

            var now =new Date();

            var second =now.getSeconds();

            var minute =now.getMinutes();

            var hour1 =now.getHours();

            //将24小时进制转为12小时，且为浮点型

            var hour=hour1+minute/60;

            hour=hour>12 ?hour-12:hour;

            //获取全部时间

            var time=now.toLocaleString( );

           //表盘

                //开始新路径

                cxt.beginPath();

                cxt.lineWidth=8;

                cxt.strokeStyle="blue";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

                cxt.arc(250,250,200,0,360,false);

                cxt.stroke();

                cxt.closePath();

            //刻度,利用旋转

               //时刻度

                for(var i=0;i<12;i++){

                	//保存当前状态

                    cxt.save();

                    //刻度粗细

                     cxt.lineWidth=5;

                    //刻度颜色

                    cxt.strokeStyle="black"

                    //设置00点,以画布中心为00

                    cxt.translate(250,250);

                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

                    cxt.rotate(i*30*Math.PI/180);

                    cxt.beginPath();

                    //刻度起始点

                    cxt.moveTo(0,-180);

                    //刻度结束点

                    cxt.lineTo(0,-195);

                    cxt.closePath();

                    cxt.stroke();

                    //将旋转后的图片返回原画布

                    cxt.restore();

                }

               //分刻度

                 for(var i=0;i<60;i++){

                	//保存当前状态

                    cxt.save();

                    //刻度粗细

                    cxt.lineWidth=3;

                    //刻度颜色

                    cxt.strokeStyle="black"

                    //设置00点,以画布中心为00

                    cxt.translate(250,250);

                    //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

                    cxt.rotate(i*6*Math.PI/180);

                    cxt.beginPath();

                    //起始点

                    cxt.moveTo(0,-188);

                    cxt.lineTo(0,-195);

                    cxt.closePath();

                    cxt.stroke();

                    //将旋转后的图片返回原画布

                    cxt.restore();

                }

            //表盘中心

                cxt.beginPath();

                cxt.lineWidth=1;

                cxt.strokeStyle="red";

                cxt.fillStyle="red";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

                cxt.arc(250,250,4,0,360,false);

                cxt.fill();

                cxt.stroke();

                cxt.closePath();

            //时针

                //保存当前状态

                 cxt.save();

                 cxt.lineWidth=5;

                 cxt.strokeStyle="black";

                 //设置异次元空间00点

                 cxt.translate(250,250);

                 //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180

                 cxt.rotate(hour*30*Math.PI/180);

                 cxt.beginPath();

                 cxt.moveTo(0,-120);

                 cxt.lineTo(0,10);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //分针

                 cxt.save();

                 cxt.lineWidth="3";

                 cxt.strokeStyle="black";

                 cxt.translate(250,250);

                 cxt.rotate(minute*6*Math.PI/180);

                 cxt.beginPath();

                 cxt.moveTo(0,-150);

                 cxt.lineTo(0,15);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //秒针

                 cxt.save();

                 cxt.lineWidth="1.5";

                 cxt.strokeStyle="red";

                 cxt.translate(250,250);

                 cxt.rotate(second*6*Math.PI/180);

                 cxt.beginPath();

                 cxt.moveTo(0,-160);

                 cxt.lineTo(0,20);

                 cxt.closePath();

                 cxt.stroke();

                 //秒针前端小点

                 cxt.beginPath();

                 //外环为红色

                 cxt.strokeStyle="red";

                 //灰色填充

                 cxt.fillStyle="gray";

                 cxt.arc(0,-145,4,0,360,false);

                   cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

            //表盘中心

                cxt.beginPath();

                cxt.lineWidth=1;

                //外环为红色

                cxt.strokeStyle="red";

                //灰色填充

                cxt.fillStyle="gray";

                //路径函数 x,y,r,角度范围,顺时针/逆时针

                cxt.arc(250,250,4,0,360,false);

                cxt.fill();

                cxt.stroke();

                cxt.closePath();

            //写时间

                cxt.font="15px 黑体 ";

                 cxt.fillStyle="black";

                //实心字

                cxt.fillText(time,160,150);

           }

           //使用setInterval(代码，毫秒时间)使时钟转起来;

           drawClock();

           setInterval(drawClock,1000);

   	  </script>

   </body>

</html>

玩转html5（四）----使用canvas画一个时钟（可以动的哦！）的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 用canvas画一个时钟

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

  4. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  5. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  6. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  7. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  8. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  9. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. 访问项目时，不能自动加载index.php文件

    1.修改配置文件D:\lamp\apache\conf\httpd.conf加上DirectoryIndex index.hmtl index.php <IfModule !mpm_netwar ...

  2. Opencv各个版本的万能头文件

    每次下载opencv的新版本时,都需要重新写头文件,更改链接库配置,很麻烦有木有?下面这个头文件是我在别人的代码中淘出来的,很不错,与大家分享~(具体作者忘记了,不好意思啊) 作者很巧妙地利用Open ...

  3. 用C语言写解释器（一）——我们的目标

    声明 为提高教学质量,我所在的学院正在筹划编写C语言教材.<用C语言写解释器>系列文章经整理后将收入书中"综合实验"一章.因此该系列的文章主要阅读对象定为刚学完C语言的 ...

  4. Qt笔记——MOC（莫克）

    moc 代表 Meta-Object Compiler,"元对象编译器".Qt 程序在交由标准编译器编译之前,先要使用 moc 分析 C++ 源文件. 假设它发如今一个头文件里包括 ...

  5. zzu--2014年11月16日月潭赛 B称号

    1229: Rational Resistance Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 8  Solved: 4 [id=1229" ...

  6. 别样JAVA学习（五）继承上(1.0)Object类equals()

    上一节继承下(一)我们进行抽象类.接口以及多态的学习. 接下来大家我们讲点特殊的东西就是object类, 我们一直在说继承,子继承了父,父还有没有父类呢, 为什么这么思考,大家想构造函数的第一行是不是 ...

  7. ZTESoft 持续集成 编年史 之 持续集成建设---自主研发（总括）

    最终选择了自主研发,考虑到我们团队对java以及flex知识的储备,展示层使用夸浏览器的flex开发,后端业务层使用java. 一.方案: BEC + ZCIPAgent + ZCIPServer + ...

  8. 关于Platinum库的MediaRender具体C++代码实现探讨

    接上篇博文 NDK下 将Platinum SDK 编译成so库 (android - upnp) 讲述了如何利用该代码库编译给android程序调用的so库,其中也提到了,在使用sample-upnp ...

  9. Java利用httpasyncclient进行异步HTTP请求

    Java利用httpasyncclient进行异步HTTP请求 前段时间有个需求在springmvc mapping的url跳转前完成一个统计的业务.显然需要进行异步的处理,不然出错或者异常会影响到后 ...

  10. HDU2037 今年暑假不AC 【贪心】

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...