<!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. 十五天精通WCF——第一天 三种Binding让你KO80%的业务

    转眼wcf技术已经出现很多年了,也在.net界混的风生水起,同时.net也是一个高度封装的框架,作为在wcf食物链最顶端的我们所能做的任务已经简单的不能再简单了, 再简单的话马路上的大妈也能写wcf了 ...

  2. iOS-多线程介绍

    一.前言部分 最近在面试,重新温习了一遍多线程,希望加深一遍对于多线程的理解. 1.什么是进程? 1).要了解线程我们必须先了解进程,通俗来讲进程就是在系统中运行的一个应用程序. 2).每个线程之间是 ...

  3. dbutils基本使用

    dbutils的查询,主要用到的是query方法,增加,修改和删除都是update方法,update方法就不讲了 只要创建ResultSetHandler接口不同的实现类对象就可以得到想要的查询结果, ...

  4. Spring学习系列(一) Spring简介

    Spring简介 之前一直想写点东西,可一直没有开始实施,各种原因都有,最大原因可能还是自己太懒了,嘿嘿.最近在看Spring in action这本书,为了能让自己坚持下去把书看完,这次决定同步的在 ...

  5. ArrayList LinkedList源码解析

    在java中,集合这一数据结构应用广泛,应用最多的莫过于List接口下面的ArrayList和LinkedList; 我们先说List, public interface List<E> ...

  6. [deviceone开发]-Star分享的优惠券商户管理端App开源

    一.简介 这是一个优惠券的商主端,也就是配置发送优惠券的App 页面和交互还是像纳豆那样非常漂亮流畅,大家可以参考一下二.效果图 三.相关下载 https://github.com/do-projec ...

  7. 【搬砖】安卓入门（2）- Java开发编程基础--进制转换和运算符

    02.01_Java语言基础(常量的概述和使用)(掌握) A:什么是常量 在程序执行的过程中其值不可以发生改变 B:Java中常量的分类 字面值常量 自定义常量(面向对象部分讲) C:字面值常量的分类 ...

  8. System.Json 使用注意

    在xamarin中对json字符串进行解析,使用System.Json时出现怪问题: json-string = { "ret" : "OK" } 使用如下代码 ...

  9. Undefined symbols for architecture arm64解决方案

    在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...

  10. iOS7之后设置NavigationBar的背景

    iOS7之后,请注意需要使用setBarTintColor ``` [self.navigationController.navigationBar setBarTintColor:[UIColor ...