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. Ubuntu上基于开源代码PhoneMe的J2ME环境搭建及使用

    测试环境:Ubuntu 14.04.5 LTS J2ME背景知识及PhoneME介绍 J2ME相关介绍 在正式开始介绍J2ME之前,这里我列出一些常见名词,方便与下文参照:J2ME(Java2 Pla ...

  2. CentOS安装Redis

    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make ...

  3. Android国际化--I18N

    在res下创建对应国家的环境的目录如:values-zh,values-en,然后在对应的目录下将对应的字符串翻译成对应国家的语言即可.

  4. Dev控件GridView单元格绑定控件

    Dev控件GridView单元格绑定控件 //文本按钮 RepositoryItemButtonEdit btnFields = new RepositoryItemButtonEdit();//创建 ...

  5. 懒加载（getter\setter理解）

    为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...

  6. C内嵌汇编-格式

    C内嵌汇编-格式: __asm__(汇编语句部分:输出部分:输入部分破坏描述部分);C内嵌汇编以关键字"__asm__"或"asm"开始, 下辖四个部分, 各部 ...

  7. 19个必须知道的Visual Studio快捷键

    项目相关的快捷键 Ctrl + Shift + B = 生成项目 Ctrl + Alt + L = 显示Solution Explorer(解决方案资源管理器) Shift + Alt+ C = 添加 ...

  8. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  9. Linux学习笔记<六>

    进程与程序 1.子程序与父程序 PID是进程的ID,PPID是其父进程的ID 登录bash之后,就是获取了一个名为bash的PID,在这个环境上所执行的其他命令,就是其子程序 common@commo ...

  10. JS学习笔记（不断更新）

    1 基础知识 为什么学习 JavaScript? JavaScript web 开发人员必须学习的 门语言中的一门: HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 网页的 ...