看到的一个html5写的时钟

<!doctype>

<html>

<head>

  <script>

   window.onload=function(){

    var canvas=document.getElementById("myCanvas");

    var c=canvas.getContext("2d");//getContenText  返回一个绘图的环境，其中2d是目前唯一合法的字符  指的是 

    var drawClock=function(){

     c.clearRect(0,0,500,500);//清除画布,

     var now =new Date();

     var sec=now.getSeconds();

     var min=now.getMinutes();

     var hour=now.getHours();

     hour=hour+min/60;

     hour=hour>12?hour-12:hour;//21:36:21 把24小时转12小时制

     //表盘

     c.lineWidth=10;

     c.strokeStyle="blue";

     c.beginPath();

     c.arc(250,250,200,0,360,false);

     c.closePath();

     c.stroke();

     //1.刻度

     //1.1 时刻度

     c.lineWidth=7;

     c.strokeStyle="#000";

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

      c.save();

      c.translate(250,250);

      c.rotate(i*30*Math.PI/180);

      c.beginPath();

      c.moveTo(0,-170);

      c.lineTo(0,-190);

      c.closePath();

      c.stroke();

      c.restore();

     }

     //1.2 分刻度

     c.lineWidth=5;

     c.strokeStyle="#000";

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

      c.save();

      c.translate(250,250);

      c.rotate(i*6*Math.PI/180);

      c.beginPath();

      c.moveTo(0,-170);

      c.lineTo(0,-180);

      c.closePath();

      c.stroke();

      c.restore();

     }

     //2.1 时针

     c.save();

     c.lineWidth=7;

     c.strokeStyle="#000";

     c.translate(250,250);

     c.rotate(hour*30*Math.PI/180);

     c.beginPath();

     c.moveTo(0,-100);

     c.lineTo(0,10);

     c.closePath();

     c.stroke();

     c.restore();

     //2.2 分针

     c.save();

     c.lineWidth=5;

     c.strokeStyle="#333";

     c.translate(250,250);

     c.rotate( min*6*Math.PI/180);

     c.beginPath();

     c.moveTo(0,-140);

     c.lineTo(0,15);

     c.closePath();

     c.stroke();

     c.restore();

     //2.3 秒针

     c.save();

     c.lineWidth=2;

     c.strokeStyle="red";

     c.translate(250,250);

     c.rotate(sec * 6 *Math.PI/180);

     c.beginPath();

     c.moveTo(0,-160);

     c.lineTo(0,20);

     c.closePath();

     c.stroke();

     //圆心加个圆圈

     c.beginPath();

     c.arc(0,0,5,0,360,false);

     c.closePath();

     c.fillStyle="green";

     c.fill();

     //在秒针前端加个圆点

     c.beginPath();

     c.arc(0,-140,10,0,360,false);

     c.closePath();

     c.fillStyle="red";

     c.fill();

     c.restore();

     //3 盘外时刻数字

     for(var i=1;i<13;i++){

      c.save();

      c.lineWidth=5;

      c.strokeStyle="blue";

      c.font="40px 黑体";

      c.translate(250,250);

      c.rotate(i*30*Math.PI/180);

      c.beginPath();

      c.strokeText(""+i,-20,-210);

      c.closePath();

      c.stroke();

      c.restore();

     }

    }

    drawClock();

    setInterval(drawClock,1000);

   }

  </script>

</head>

<body>

  <canvas width="500" height="500" id="myCanvas" style="background-color:yellow">

     垃圾浏览器不支持canvas标签

  </canvas>

</body>

</html>

效果图

html5写的一个时钟的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. html5制作一个时钟

    试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...

  3. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  4. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  5. [译]终极塔防——运用HTML5从头创建一个塔防游戏

    翻译共享一篇CodeProject的高星力作,原文地址:http://www.codeproject.com/Articles/737238/Ultimate-Tower-Defense 下载演示项目 ...

  6. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  7. 搞了我一下午竟然是web.config少写了一个点

    Safari手机版居然有个这么愚蠢的bug,浪费了我整个下午,使尽浑身解数,国内国外网站搜索解决方案,每一行代码读了又想想了又读如此不知道多少遍,想破脑袋也想不通到底哪里出了问题,结果竟然是web.c ...

  8. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  9. 写了一个常规性生成merge 的小脚本

    现在使用数据库来写存储过程,动不动参数就会用到xml ,当然罗,优势也很明显,参数相对固定,而且灵活,如果要修改或者什么的,中间接口层也不需要做变化,只需要修改封装的存储过程以及程序传参就ok了. 随 ...

随机推荐

  1. 最火的Android开源项目（完结篇）

    65. AndroidSideMenu AndroidSideMenu能够让你轻而易举地创建侧滑菜单.需要注意的是,该项目自身并不提供任何创建菜单的工具,因此,开发者可以自由创建内部菜单. 66. A ...

  2. Lua 第一个应用程序 Hello World

    lua 开发环境的搭建 现已windows系统为例,演示一下lua环境的搭建. Lua_v5.1.4 下载地址 http://code.google.com/p/luaforwindows/ 点击&q ...

  3. cmd 控制台 提示：请求的操作须要提升！

    cmd 控制台 提示:请求的操作须要提升! 在windows7中想用route add 或相关route等命令须要以管理员身份执行,假设windows7以下没有以管理身份执行那么加入路由时候route ...

  4. 转换流--OutputStreamWriter类与InputStreamReader类

    12.4  转换流--OutputStreamWriter类与InputStreamReader类 整个IO包实际上分为字节流和字符流,可是除了这两个流之外,还存在一组字节流-字符流的转换类. Out ...

  5. [RxJS] Drag and Drop example

    Improving our mouse drag event Our mouse drag event is a little too simple. Notice that when we drag ...

  6. [Angular 2] Handle Reactive Async opreations in Service

    When you use ngrx/store and you want to fire a service request. When it sucessfully return the respo ...

  7. java--map容器的hashcode和equals

    先看一个例子 首先定义一个user类. package com.text.tool; public class User { int id; User(int id) { this.id = id; ...

  8. quartz 报错：java.lang.classNotFoundException

    最近在做一个调度平台改造的项目,quartz在测试环境跑的是单机环境,生产上两台服务器做集群. 测试环境是ok的,生产上线后报错,一个类java.lang.classNotFoundException ...

  9. 路径MTU

    数据在以太网中的传输有长度有一个限制,其最大值一般情况下是1500字节.链路层的这个特性叫作MTU,也就是最大传输单元.不同类型的网络会有所不同的.如果IP层有一个数据报要传输,而且数据的长度比链路层 ...

  10. magento搜索属性值的设置方法

    前台特性(Frontend Properties)在快速搜索中应用(Use in quick search) - 开启此选项,在客户使用Header中的 搜索功能时Magento将搜索所有产品这个At ...