http://5227788.cn/static/time.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    body{background: #131115;}

    #c1{background: #fbf7fe;}

    </style>

    <script>

    window.onload=function(){

        var oC=document.getElementById('c1');

        var oGC=oC.getContext('2d');

        setInterval(toDraw,1000);

    function toDraw(){

        var x=200;

        var y=200;

        var r=150;

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

        var oDte=new Date();

        var oHours=oDte.getHours();

        var oMin=oDte.getMinutes();

        var oSen=oDte.getSeconds();

            var oHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180;

            var oMinValue=(-90+oMin*6)*Math.PI/180;

            var oSenValue=(-90+oSen*6)*Math.PI/180;

          oGC.beginPath();

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

            oGC.moveTo(x,y);

            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle='white';

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

          oGC.lineWidth=3;

         oGC.beginPath();

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

            oGC.moveTo(x,y);

            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle='white';

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

         oGC.lineWidth=3;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*9/20,oMinValue,oMinValue,false);

        oGC.closePath();

        oGC.stroke();

          oGC.lineWidth=1;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*14/20,oSenValue,oSenValue,false);

        oGC.closePath();

        oGC.stroke();

        oGC.lineWidth=4;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*6/20,oHoursValue,oHoursValue,false);

        oGC.closePath();

        oGC.stroke();

     }

    }

   </script>

</head>

<body>

    <canvas id="c1" width="500" height="500"><!-- 默认宽300； 高150 -->

    <span>不支持camvas浏览器</span>

    </canvas>

</body>

</html>

html5--canvas绘制简单的时钟的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  3. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  9. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  10. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

随机推荐

  1. Android中关于cpu/cpuset/schedtune的应用

    Android中关于cpu/cpuset/schedtune的应用都是基于进程优先级的,根据不同优先级划分进程类型.AMS(ActivityManagerService)和PMS(PackageMan ...

  2. 【WPF】新复制wpf项目报错

    错误提示:Program does not contain a static 'Main' method suitable for an entry point 1.App.xaml 文件属性:生成操 ...

  3. blog (后续更新)

    设计Model(设计数据库) from django.db import models # Create your models here. class BlogsPost(models.Model) ...

  4. PHP函数

    2017.1.5 stream_get_contents函数:读取数据流中的剩余数据到字符串 [功能说明] 该函数同file_get_COntents()函数的作用相同,只不过该函数用于读取已经打开的 ...

  5. 建模前的数据清洗/ETL（python）

    1. 读取数据 data= open('e:/java_ws/scalademo/data/sample_naive_bayes_data.txt' , 'r') 2. 把数据随机分割为trainin ...

  6. 架构师养成记--10.master-worker模式

    master-worker模式是一种并行计算模式,分为master进程和worker进程两个部分,master是担任总管角色,worker才是执行具体任务的地方. 总体流程应该是这样的: 具体一点,代 ...

  7. json数组去重

    //名字去重 Map<String,Integer> map=new HashMap<String,Integer>(); for(int i=0;i<jows.size ...

  8. Python批量扫描服务器指定端口状态

    闲来无事用Python写了一个简陋的端口扫描脚本,其简单的逻辑如下: 1. python DetectHostPort.py iplist.txt(存放着需要扫描的IP地址列表的文本,每行一个地址) ...

  9. 埃拉托色尼筛法（Sieve of Eratosthenes）求素数。

    埃拉托色尼筛法(Sieve of Eratosthenes)是一种用来求所有小于N的素数的方法.从建立一个整数2~N的表着手,寻找i? 的整数,编程实现此算法,并讨论运算时间. 由于是通过删除来实现, ...

  10. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...