<!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. Android中的Interpolator

    Android中的Interpolator Interpolator用于动画中的时间插值,其作用就是把0到1的浮点值变化映射到另一个浮点值变化. 本文列出Android API提供的Interpola ...

  2. DirectX标准规定 DirectX和OpenGL的不同

    DirectX标准规定 DirectX使用左手坐标系. X轴正向指向右,Y轴正向指向上,Z轴正向垂直纸面向内. 编写Direct3D应用程序时,通常只使用4×4的矩阵和1×4的行向量,相乘时行向量在前 ...

  3. Android 扒开美女衣服

    本文主要实现一个小的扒开美女衣服的游戏项目 效果如下: 项目布局设计: <FrameLayout xmlns:android="http://schemas.android.com/a ...

  4. OC 类方法,对象方法,构造方法以及instancetype和id的异同

    OC 类方法,对象方法,构造方法以及instancetype和id的异同 类方法: 类方法是可以直接使用类的引用,不需要实例化就可以直接使用的方法.一般写一些工具方法. 类方法: 声明和实现的时候,以 ...

  5. Jquery mobile 中在列表项上使用单选按钮

      无意中发现可以在li上实现开关按钮 http://jsfiddle.net/Gajotres/pzfr2/                 触类旁通,终于实现了在li上增加单选按钮组   @mod ...

  6. 理解TCP三次握手/四次断开的必要性

    1 TCP的三次握手与必要性 (1)三次握手图 (2)必要性:TCP通过三次握手建立可靠的(确保收到)的全双工通信. 1)第一次握手和第二次握手(ACK部分)建立了从客户端到服务器传送数据的可靠连接: ...

  7. PowerBI通过gateway连接多维数据库

    简介   Microsoft Power BI 是由微软推出的商业智能的专业分析工具,给用户提供简单且丰富的数据可视化及分析功能.个人非常喜欢,有免费版和Pro的付费版,今天主要是介绍下通过gatew ...

  8. 按要求编写Java应用程序。 （1）创建一个叫做机动车的类： 属性：车牌号(String)，车速(int)，载重量(double) 功能：加速(车速自增)、减速(车速自减)、修改车牌号，查询车的载重量。 编写两个构造方法：一个没有形参，在方法中将车牌号设置“XX1234”，速 度设置为100，载重量设置为100；另一个能为对象的所有属性赋值； （2）创建主类： 在主类中创建两个机动车对象。 创建第

    package com.hanqi.test; public class jidongche { private String chepaihao;//车牌号 private int speed;// ...

  9. 烂泥：使用snmpwalk采集设备的OID信息

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 打算开始学习有关监控方面的知识,但是现在很多监控系统都是根据SNMP进行的.而SNMP监控的性能指标很多都是通过snmpwalk采集设备的OID信息得到 ...

  10. 烂泥：Windows下安装与配置Nginx web服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前几篇文章,我们使用nginx都是在linux环境下,今天由于工作的需要.需要在windows环境也使用nginx搭建web服务器. 下面记录下有关ng ...