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. 如何在一台新电脑上配置JAVA开发环境

    对于JAVA新手来说,刚开始要学JAVA,而自己的电脑上毫无与JAVA开发有关的环境,应该如何进行配置呢? (安卓新手也需要JAVA开发环境) 第一步,下载.安装java JRE JRE (Java ...

  2. 标准库String类

    下面的程序并没有把String类的所有成员方法实现,只参考教程写了大部分重要的成员函数. [cpp] view plain copy #include<iostream> #include ...

  3. 现在有哪些浏览器的哪些版本支持 HTML5

    现在有哪些浏览器的哪些版本支持 HTML5 1.IE IE9支持部分 IE10+支持2.Firefox Firefox3.5,3.6支持大部分 Firefox4.0+支持3.Chrome Chrome ...

  4. PAT Basic Level 1001

    大纲考察内容 数据存储结构:数组.链 基础算法:递归.排序.计算时间复杂度.空间复杂度.分析算法稳定性 1001.害死人不偿命的(3n+1)猜想 (15) https://www.patest.cn/ ...

  5. ubuntu10.04配置XMAPP中的环境变量

    1. 显示环境变量:[root@localhost ~]# echo $PATH/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/lo ...

  6. 【翻译】如何在AJAX生成的内容中再次运行Prism.js

    一.前言 最近用一个十分轻量级的网页代码高亮Js库,应用到项目中发现了一个问题,对于静态的已经写好的代码,Prism的高亮插件是没有问题的,但是通过Ajax异步获取数据并修改DOM时发现,Prism高 ...

  7. Express4+Mongodb超简单入门实例

    开始前,请确保mongodb已经能正常工作,安装教程:windows下MongoDB的安装及配置 , 请自行安装配置.下面进入正文: 第一步:命令行创建数据库.表,并插入一条数据 命令如下: //创建 ...

  8. Asp.net C# 把 Datatable转换成JSON 字符串

    First of all, we have to fetch the records from the database (MS Sqlserver) into the C# DataTable, o ...

  9. U盘存放大于4G数据文件且无须格式化U盘的解决方法

    现在优盘的容量越来越大了,价格越来越便宜,可是它也有个缺点,因为它默认的文件系统是"FAT32",这种文件系统最大只能保存4G的文件,超过4G的文件就不能保存在优盘上了,这样就不能 ...

  10. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...