<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript">

 window.onload = function (){

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

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

     var x = 300;

     var y = 300;

     var r = 150;

     var h = 0;

     var m = 0;

     var s = 0;

     setInterval(function (){

         var date = new Date();

         h = date.getHours();

         m = date.getMinutes();

         s = date.getSeconds();

         var f = m/2;

         console.log(h + "-" + m + "-" + s + " , " + f);

         html5Clock();

     },1000);

     function html5Clock(){

         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);

         }

         oGC.closePath();

         oGC.stroke();

         oGC.beginPath();

         oGC.fillStyle = "#fff";

         oGC.arc(x,y,r-8,0,2*Math.PI);

         oGC.closePath();

         oGC.fill();

         oGC.beginPath();

         //oGC.fillStyle = "red";

         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);

             //oGC.lineWidth = "2";

         }

         oGC.closePath();

         oGC.stroke();

         oGC.beginPath();

         oGC.arc(x,y,r-20,0,2*Math.PI);

         oGC.closePath();

         oGC.fill();

         //秒钟

         oGC.beginPath();

         //oGC.strokeStyle = "#016a9f";

         oGC.moveTo(x,y);

         oGC.arc(x,y,r-9,6*(s-15)*Math.PI/180,6*(s-15)*Math.PI/180);

         oGC.lineWidth = "1";

         oGC.stroke();

         //分钟

         oGC.beginPath();

         oGC.moveTo(x,y);

         oGC.arc(x,y,r-12,6*(m-15)*Math.PI/180,6*(m-15)*Math.PI/180);

         //oGC.lineWidth = 2;

         oGC.stroke();

         //时钟

         oGC.beginPath();

         //oGC.strokeStyle = "red";

         oGC.moveTo(x,y);

         oGC.arc(x,y,r-50,(30*(h-3)+(m/2))*Math.PI/180,(30*(h-3)+(m/2))*Math.PI/180);

         oGC.stroke();

     }

     html5Clock();

 }

 </script>

 </head>

 <body>

 <canvas id="c1" width="800" height="600" style="border:1px solid #ccc;"></canvas>

 </body>

 </html>
  • 有空再写注释

HTML5画的简单时钟的更多相关文章

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

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

  2. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  3. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

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

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

  5. Directx11学习笔记【十一】 画一个简单的三角形--effect框架的使用

    这里不再介绍effect框架的具体使用,有关effect框架使用可参考http://www.cnblogs.com/zhangbaochong/p/5475961.html 实现的功能依然是画一个简单 ...

  6. html5滚动页面简单写法

    html5滚动页面简单写法纵向滚动比较简单 直接在外面加个高度 然后overflow-y: auto; 横向比较复杂了外面写两层 最外面一层写个宽度 overflow-x: auto;第二层 写wid ...

  7. Unity项目 - 简单时钟 Clock

    项目展示 Github项目地址:简单时钟 Clock 制作流程 表盘绘制: 采用Aseprite 像素绘图软件绘制表盘及指针.本例钟表素材大小 256x256,存储格式为png,但发现导入Unity后 ...

  8. 如何用latex画一个简单的表格

    latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...

  9. Directx11教程(19) 画一个简单的地形

    原文:Directx11教程(19) 画一个简单的地形       通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...

随机推荐

  1. html学习-第一集（基本标签）

    什么是HTML html是一套规则,浏览器认识的规则 开发者怎么使用html 学习HTML语言 开发后台程序 写HTML文件 从数据库获取数据,然后替换到html中对应的位子(web框架) HTML文 ...

  2. 【MySQL】安装及配置

    " 目录 #. 概述 1. 什么是数据(Data) 2. 什么是数据库(DataBase, 简称DB) 3. 什么是数据库管理系统(DataBase Management System) 4 ...

  3. 基于SILVACO ATLAS的a-IGZO薄膜晶体管二维器件仿真（06）

    在知网看到了江南大学的硕士论文: 双有源层a-IGZO薄膜晶体管的特性仿真 IGZO/IZO双有源层薄膜晶体管特性的模拟研究 发现,我昨天的文章中参数的设置存在重大失误,如下材料定义语句中: mate ...

  4. 关于emoji表情，支持在app端发送web端显示，web端发送给app端显示，web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  5. python csv 数据切割定制jmeter数据

    需求压测随机抽取10w数据中自定义区间的指定数量数据进行压测: jmeter csv/txt配置: 需要获取{data: [${myList}]  }  jmeter需要数据类型 获取展读取csv数据 ...

  6. Linux 目录结构与目录操作

    目录结构 Linux的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后再次目录下再创建其他目录 在Linux系统中,一切皆文件 常见目录作用 / : 所有 ...

  7. python的空格和tab混用报错问题

    python中的空格和tab键不能混用,如果则会报类似如下的错误: IndentationError: unindent does not match any outer indentation le ...

  8. 解决前端项目启动时报错：Use // eslint-disable-next-line to ignore the next line.

    首先说一下这个问题产生的原因: 项目创建时设置了使用 eslint 进行代码规范检查. 解决办法: 找到webpack.base.conf.js文件,并且将下满这行代码注释掉. ...(config. ...

  9. jQuery学习（三）

    jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...

  10. 吴裕雄--天生自然TensorFlow2教程：梯度下降简介

    import tensorflow as tf w = tf.constant(1.) x = tf.constant(2.) y = x * w with tf.GradientTape() as ...