<!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. 编写高质量的Objective-C代码

    点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法.   良好的风格: view.backgroundColor = [UIColor or ...

  2. linux 修改home 目录

         第一种方法:vi /etc/passwd 找到要修改的用户那几行,修改掉即可.此法很暴力,建议慎用. /etc/passwd文件格式 登录名:加密口令:数字用户ID:数字组ID:注释字段:起 ...

  3. System.currentTimeMillis()与SystemClock.uptimeMillis()

    1.System.currentTimeMillis()获取的是系统的时间,可以使用SystemClock.setCurrentTimeMillis(long millis)进行设置.如果使用Syst ...

  4. Android九宫格界面实现点击每个格点击跳转界面

    刚开始有个任务就是做一个九宫格界面,后来有个任务就是实现点击每个格并跳转界面实现每个格的功能.下面我就介绍一下我是如何实现该功能的 首先写一下我的想法是: 登录成功后显示一个九宫格界面,每个九宫格的每 ...

  5. RxJava 和 RxAndroid 二（操作符的使用）

    前言:对Rx不了解的朋友可以先看我的第一篇博文 RxJava 和 RxAndroid 一 (基础),是对Rxjava的基本介绍 1.merge操作符,合并观察对象 List<String> ...

  6. Mark一下，Android ListView的上下间隙

    困扰很久的问题,怎么给ListView上下加padding,可以跟随滚动的那种 android:paddingTop="10dp" android:paddingBottom=&q ...

  7. 深入.net（文件操作）

    自己进行数据的“持久化操作”: ----- 数据持久化技术:程序还运行过程中,所有的“中间数据”(加工或处理过程中数据)都存放在内存中,但内存的特点是掉电后数据无法保存,所以需要有种技术能够将存放在内 ...

  8. iOS常见三方总结(更新中)

    常用的三方积累 MJExtention SSZipArchive 用于解压与压缩文件 地址:https://github.com/ZipArchive/ZipArchive ps:比较奇葩,githu ...

  9. 最近项目用到Dubbo框架，临时抱佛脚分享一下共探讨。

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  10. 避坑宝典：如何选择HTML5游戏引擎

    原生手游市场已是红海,腾讯.网易等寡头独霸天下,H5游戏市场成为下一个风口.据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折. 如何选择适合团队和项目的引擎,笔者通过学习和项目实践 ...