看到的一个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. Python递归遍历目录下所有文件

    #自定义函数: import ospath="D:\\Temp_del\\a"def gci (path): """this is a stateme ...

  2. play wav sound

    播放 WAV文件             string s = @"D:\Administrator\安装文件\完美世界国际版\patcher\skin\sounds\click.wav&q ...

  3. Windows 自己主动关机命令 shuntdown

    以下介绍一个在Windows XP下实现定时关机的简单方法. 一 .倒计时关机:      指定系统在10分钟后自己主动关闭:点击“開始→执行”,输入命令“Shutdown -s -t 60”(注意: ...

  4. QT运行时加载UI文件

      写QT程序里运行时加载UI文件,代码如下: 点击(此处)折叠或打开 #include "keyboard.h" #include <QtUiTools> #incl ...

  5. Java基础知识强化之IO流笔记62：三种方式实现键盘录入

    1. 三种方式实现键盘录入     System.in 标准输入流.是从键盘获取数据的 键盘录入数据三种方式:  A:main方法的args接收参数.  java HelloWorld hello w ...

  6. 破解C#的readonly只读字段

    破解C#的readonly只读字段 目录 请允许我再唠叨几句const和readonly 修改readonly字段: 计策1:反间计 -- 反射修改 计策2:借刀杀人--调节字段偏移位置的结构体来修改 ...

  7. oracle Form Builer:FIND_FORM Built-in

    Description Searches the list of forms and returns a form module ID when it finds a valid form with ...

  8. [理解ASP.NET Core框架]一个五十行的控制台Web

    在阅读了Artech的ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程之后, 自己做了一个"迷你版"中的"迷你版" ...

  9. row_number() OVER (PARTITION BY COL1 ORDER BY COL2)

    select *,ROW_NUMBER() over(partition by deviceID order by RecordDate desc row_number() OVER (PARTITI ...

  10. SDL实现限制帧速

    很多人都在SDL_PollEvent和SDL_WaitEvent之间纠结.前者会带来更好的帧数表现,但是CPU占用极大,可以直接吃掉一个核心.后者则基本不占用CPU,但是帧数会受到影响.有没有办法使两 ...