<!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. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  2. StringBuilder的使用

    今天用到了StringBuilder来拼接查询语句,发现这个真好用,决定做个小结. 百度一个StringBuilder的定义:String 对象是不可改变的.每次使用 System.String 类中 ...

  3. IDEA 中生成 MyBatis 逆向工程实践

    IDEA 逆向 MyBatis 工程时,不像支持 Hibernate 那样有自带插件,需要集成第三方的 MyBatis Generator. MyBatis Generator的详细介绍 http:/ ...

  4. java web学习总结(二十二) -------------------简单模拟SpringMVC

    在Spring MVC中,将一个普通的java类标注上Controller注解之后,再将类中的方法使用RequestMapping注解标注,那么这个普通的java类就够处理Web请求,示例代码如下: ...

  5. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  6. 4款最具影响力的自助式BI工具

    数据为王的时代,人人都需要掌握一些数据分析技能.不懂SQL,不懂数据库,Excel不精通,VBA不敢碰,这些都是横亘在面前的一道坎. 然而,企业数据分析日益上涨,数据人才供不应求,为了降低入门门槛,近 ...

  7. Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead的解决办法

    今天在导入工程进Eclipse的时候竟然出错了,控制台输出的是: [2013-02-04 22:17:13 - takepicture] Android requires compiler compl ...

  8. 看看C# 6.0中那些语法糖都干了些什么（中篇）

    接着上篇继续扯,其实语法糖也不是什么坏事,第一个就是吃不吃随你,第二个就是最好要知道这些糖在底层都做了些什么,不过有一点 叫眼见为实,这样才能安心的使用,一口气上五楼,不费劲. 一:字符串嵌入值 我想 ...

  9. iOS系列 基础篇 09 开关、滑块和分段控件

    iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块 ...

  10. Unsupported major.minor version 51.0错误

    错误原因:用jdk7编译的class文件放到基于jdk6运行在tomcat之中,就会报这个错 解决方法:项目------>右键------>属性------>Java Compile ...