<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:;

            padding:;

        }

        html,body{

            background:#;

        }

        #c1{

            background:#fff;

        }

    </style>

    <script>

        window.onload=function(){

            var oC=document.getElementById('c1');

            var gd=oC.getContext('2d');

            function toDraw(){

                var x=;

                var y=;

                var r=;

                var oDate= new Date();

                var h=oDate.getHours();

                var m=oDate.getMinutes();

                var s=oDate.getSeconds();

                var ms=oDate.getMilliseconds();

                console.log(ms);

                gd.clearRect(,,oC.width,oC.height);

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

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r,i**Math.PI/,(i+)**Math.PI/,false);

                    gd.closePath();

                    gd.stroke();

                }

                    gd.fillStyle='#fff';

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r*/,,*Math.PI/,false);

                    gd.closePath();

                    gd.fill();

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

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r,i**Math.PI/,(i+)**Math.PI/,false);

                    gd.closePath();

                    gd.stroke();

                }

                    gd.fillStyle='#fff';

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r*/,,*Math.PI/,false);

                    gd.closePath();

                    gd.fill();

                    gd.lineWidth=;

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r*/,(-+h*+m/)*Math.PI/,(-+h*+m/)*Math.PI/,false);

                    gd.closePath();

                    gd.stroke();

                    gd.lineWidth=;

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r*/,(-+m*+s/)*Math.PI/,(-+m*+s/)*Math.PI/,false);

                    gd.closePath();

                    gd.stroke();

                    gd.lineWidth=;

                    gd.beginPath();

                    gd.moveTo(x,y);

                    gd.arc(x,y,r*/,(-+s*+ms*/)*Math.PI/,(-+s*+ms*/)*Math.PI/,false);

                    gd.closePath();

                    gd.stroke();

            }

            toDraw();

            setInterval(toDraw,)

        };

    </script>

</head>

<body>

    <canvas width="" height="" id="c1"></canvas>

</body>

</html>

canvas时钟的更多相关文章

  1. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  2. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

  6. html5 canvas时钟

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

  7. canvas时钟效果

    话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...

  8. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  9. 简单的canvas时钟

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

  10. canvas 时钟+自由落体

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

随机推荐

  1. App开发流程之使用分类(Category)和忽略编译警告(Warning)

    Category使得开发过程中,减少了继承的使用,避免子类层级的膨胀.合理使用,可以在不侵入原类代码的基础上,写出漂亮的扩展内容.我更习惯称之为"分类". Category和Ext ...

  2. 【代码笔记】iOS-背景色随机显示

    一,效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m - (void)viewDidLoad { [super viewDidLo ...

  3. C++语言-08-命名空间

    概述 命名空间通常作为附加信息来区分不同库中相同名称的函数.类.变量.命名空间的本质是定义一个范围,该范围即为一个上下文,一个上下文中通常不允许出现相同名称的函数.类.变量. 定义 定义格式 普通的命 ...

  4. HttpClient 教程 (A)

    前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了.Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需 ...

  5. Oracle 时间差计算

    两个Date类型字段:START_DATE,END_DATE,计算这两个日期的时间差(分别以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_DATE - START_DAT ...

  6. Sql Server之旅——终点站 nolock引发的三级事件的一些思考

    曾今有件事情让我记忆犹新,那年刚来携程不久,马上就被安排写一个接口,供企鹅公司调用他们员工的差旅信息,然后我就三下五除二的给写好 了,上线之后,大概过了一个月...DBA那边报告数据库出现大量锁超时, ...

  7. Sql Server之旅——第十三站 对锁的初步认识

    终于这个系列快结束了,马上又要过年了,没什么心情写博客...作为一个开发人员,锁机制也是我们程序员必须掌握的东西,很久之前 在学习锁的时候,都是教科书上怎么说,然后我怎么背,缺少一个工具让我们眼见为实 ...

  8. SQL Server字符串左匹配

    在SQL Server中经常会用到模糊匹配字符串的情况,最简单的办法就是使用like关键字(like语法http://msdn.microsoft.com/en-us/library/ms179859 ...

  9. SQL语句查询某表的所有字段及数据类型

    SQL语句查询某表的所有字段及数据类型 SELECT name AS column_name , TYPE_NAME(system_type_id) AS column_type , max_leng ...

  10. 【hadoop】——window下elicpse连接hadoop集群基础超详细版

    1.Hadoop开发环境简介 1.1 Hadoop集群简介 Java版本:jdk-6u31-linux-i586.bin Linux系统:CentOS6.0 Hadoop版本:hadoop-1.0.0 ...