<!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 Handler机制（一）---Message源码分析

    Message: 定义: public final class Message implements Parcelable Message类是个final类,就是说不能被继承,同时Message类实现 ...

  2. 经典的Java基础面试题集锦

    经典的Java基础面试题集锦,欢迎收藏和分享. 问题:如果main方法被声明为private会怎样? 答案:能正常编译,但运行的时候会提示”main方法不是public的”. 问题:Java里的传引用 ...

  3. Android每次运行项目时重新启动一个新的模拟器的解决办法

    具体解决办法 1.打开任务管理器,结束adb进程 2.此时android console下面会出现错误信息 3.切换到dos下面运行: adb start-server 4.重新运行android项目 ...

  4. iOS 内存问题

    malloc: *** error for object 0x15f8a3558: incorrect checksum for freed object - object was probably ...

  5. 【读书笔记】iOS-使用Web Service-基于客户端服务器结构的网络通信（一）

    Web Service技术是一种通过Web协议提供服务,保证不同平台的应用服务可以互操作,为客户端程序提供不同的服务. 目前3种主流的Web Service实现方案用:REST,SOAP和XML-RP ...

  6. iOS sqlite3 的基本使用(增 删 改 查)

    iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...

  7. 在SQL2008中使用XML应对不确定结构的参数

    目的:统一接口,当数据结构发生变化时,前后端业务接口不发生变化,由业务具体解析结构. 规则:确定的接口用参数表(多行提交),不确定的参数用XML   DECLARE @r TABLE     (    ...

  8. WPF学习之路（五） 实例：写字板

    写字板实例一 MainWindow.xaml <Window x:Class="Wordpad01.MainWindow" xmlns="http://schema ...

  9. Sublime更换默认字体的方法

    Sublime是一款很不错的编辑器,不过默认安装后的字体却不尽人意,并且Sublime竟然连个完整的设置页面都没有(直接让你编辑配置文件).于是很多人对这字体就忍气吞声了.其实只要添加一行代码就可以完 ...

  10. PMBOK学习笔记二－项目管理过程

    项目管理过程可归纳为五类,即五大项目管理过程组 启动过程组.定义一个新项目或现有项目的一个新阶段,授权开始该项目或阶段的一组过程..规划过程组.明确项目范围,优化目标,为实现目标制定行动方案的一组过程 ...