<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css">

            body{background: black;}

            canvas{background: #fff;}

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var oC=document.getElementById("oc");

                var oG=oC.getContext("2d");

                function draw(){

                    //获取当前时间

                    var myDate=new Date();

                    var hour=myDate.getHours();

                    var min=myDate.getMinutes();

                    var sec=myDate.getSeconds();

                    //分格

                    oG.clearRect(0,0,oC.width,oC.height);

                    oG.beginPath();

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

                        oG.moveTo(300,300);

                        oG.arc(300,300,200,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

                    }

                    oG.closePath();

                    oG.stroke();

                    //覆盖

                    oG.beginPath();

                    oG.moveTo(300,300);

                    oG.arc(300,300,200*19/20,0,360*Math.PI/180,false);

                    oG.fillStyle="#fff";

                    oG.closePath();

                    oG.fill();

                    //时

                    oG.beginPath();

                    oG.lineWidth=3;

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

                        oG.moveTo(300,300);

                        oG.arc(300,300,200,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

                    }

                    oG.closePath();

                    oG.stroke();

                    //覆盖

                    oG.beginPath();

                    oG.moveTo(300,300);

                    oG.arc(300,300,200*18/20,0,360*Math.PI/180,false);

                    oG.fillStyle="#fff";

                    oG.closePath();

                    oG.fill();

                    //时分秒针

                    oG.beginPath();

                    oG.lineWidth=5;

                    oG.moveTo(300,300);

                    oG.arc(300,300,200*0.5,((hour+min/60)*30-90)*Math.PI/180,((hour+min/60)*30-90)*Math.PI/180,false);

                    oG.closePath();

                    oG.stroke();

                    oG.beginPath();

                    oG.lineWidth=3;

                    oG.moveTo(300,300);

                    oG.arc(300,300,200*0.6,((min+sec/60)*6-90)*Math.PI/180,((min+sec/60)*6-90)*Math.PI/180,false);

                    oG.closePath();

                    oG.stroke();

                    oG.beginPath();

                    oG.lineWidth=1;

                    oG.moveTo(300,300);

                    oG.arc(300,300,200*0.8,(sec*6-90)*Math.PI/180,(sec*6-90)*Math.PI/180,false);

                    oG.closePath();

                    oG.stroke();

                }

                draw();

                setInterval(draw,1000);

            }

        </script>

    </head>

    <body>

        <canvas id="oc" width="600" height="600"></canvas>

    </body>

</html>

canvas钟表的更多相关文章

  1. html5 canvas 钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. canvas - 钟表

    Demo : Demo Demo截图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  4. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  5. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  6. [Canvas]新版箴言钟表

    动态效果点此下载用浏览器打开观看. 本作Github地址:https://github.com/horn19782016/12MaximClock 图例: 代码: <!DOCTYPE html& ...

  7. Canvas基础——钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  8. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  9. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

随机推荐

  1. Button 模板和样式

    <Style TargetType="{x:Type Button}"> <Setter Property="FontFamily" Valu ...

  2. Xcode7.1环境下上架iOS App到AppStore 流程② (Part 二)

    前言部分 part二部分主要讲解 iOS App IDs 的创建.概要文件的配置.以及概要文件安装的过程. 一.iOS App IDs 的创建 1)进入如图1所示界面点击右上角箭头所指的加号 进入iO ...

  3. Java内部类学习笔记

    20160923 定义:将一个类的定义放在另一个类的内部: 从外部类的非静态方法之外,创建某个内部类的对象:OutClassName.InnerClassName: 内部类拥有所有其外部类的成员的访问 ...

  4. 你搞懂 ORACLE、 SQLSERVER、MYSQL与DB2的区别了吗

    ORACLE. SQLSERVER.MYSQL与DB2的区别--平台性:    Oracle.MYSQL与DB2可在所有主流平台上运行:    SQL Server只能在Windows下运行: --安 ...

  5. 炫酷的jQuery对话框插gDialog

    js有alert,prompt和confirm对话框,不过不是很美体验也不是很好,用jQuery也能实现, 体验效果:http://hovertree.com/texiao/jquery/34/ 代码 ...

  6. O365（世纪互联）SharePoint 之使用列表库发布新闻

    前言 上一篇文章,我们简单介绍了如何个性化O365的SharePoint站点,本文我们演示一下如何使用SharePoint自带的列表应用程序,定制一个公司新闻的栏目. 其间,用到的主要工具是Share ...

  7. Android Weekly Notes Issue #225

    Android Weekly Issue #225 October 2nd, 2016 Android Weekly Issue #225 本期内容包括: Android 7.0的Quick Sett ...

  8. Android中的自定义控件（一）

    自定义控件是根据自己的需要自己来编写控件.安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件.同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创 ...

  9. UILabel 自适应宽高

    #import <UIKit/UIKit.h> @interface UILabel (UILabel_LabelHeighAndWidth) + (CGFloat)getHeightBy ...

  10. 获取View的截图-将View转换为Bitmap对象

    开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bitmap的工具类 /** * 将View转 ...