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. Google C++命名规范

    时间:2014.03.02 地点:基地 -------------------------------------------------------------------------------- ...

  2. 查询SqlServer中每张表的记录数

    select schema_name(t.schema_id) as [ Schema ], t. name as TableName,i. rows as [RowCount] from sys.t ...

  3. JavaScript中的类型转换

    1.隐式类型转换 ①== 如果相等操作的两个变量不是同一类型,那么相等运算符会尝试进行一些类型转换: 如果一个是null,一个是undefined,则他们相等: 如果一个值是数字,另一个是字符串,先将 ...

  4. python学习笔记（一）

    • Python能干嘛?[1]科学计算[2]图形化开发[3]系统脚本[4]Web服务器[5]网络爬虫[6]服务器集群自动化运维 • 常用工具:easy_install.pip.ipython.Subl ...

  5. C#之设计模式

    单例的一种实现方式 1.构造函数私有化 2.声明一个静态字段,作为全局唯一的单例对象 3.声明一个静态函数,返回全局唯一的对象 using System; using System.Collectio ...

  6. IndexedDB（本地存储）

    var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...

  7. ThinkPhp 3.2 常见问题与注意事项

    1 命名空间声明必须写在脚本的最前面 如果运行PHP脚本后出现如下错误: Namespace declaration statement has to be the very first statem ...

  8. UP Board USB无线网卡一贴通

    前言 原创文章,转载引用务必注明链接,水平有限,欢迎指正. 本文环境:ubilinux 3.0 kernel 4.4.0 本文使用Markdown写成,为获得更好的阅读体验和正常的图片.链接,请访问我 ...

  9. express源码剖析1

    在通读源码之前,先把一些比较难理解的代码吃透: 1.EventEmitter.prototype mixin(app, EventEmitter.prototype, false); app为一个函数 ...

  10. CSS3 速移动效果动画流畅无卡顿

    js或jquery 元素移动以像素计算,手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 transform: translate3d(66px, 88px, 0px) rotat ...