看到的一个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. AndroidAnnotations部署

    环境: 系统:windows 8 (64bit) 开发工具:Eclipse 3.8 JDK版本:jdk1.6 构建工具:Ant(Eclipse默认的build tool) androidannotat ...

  2. C# 基础知识 protected 关键字

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Console ...

  3. PowerShell随笔2_分支 选择 循环 特殊变量

    PowerShell特殊变量: PowerShell的特殊变量由系统自动创建.用户自定义的变量名称应该不和特殊变量相同. $^ :前一命令行的第一个标记 $$ :前一命令行的最后一个标记 $_ :表示 ...

  4. android颜色对应的xml配置值,颜色表

    网上找的一些颜色值 XML配置 <?xml version="1.0" encoding="utf-8" ?> <resources> ...

  5. QTP下载链接

    QTP下载链接 QTP官网下载:http://www8.hp.com/us/en/software-solutions/software.html?compURI=1172957#.UNMOQ2_FW ...

  6. 二叉树可视化--Graphviz

    大家平时写C程序有没有种把内存里的数据结构全给画出来的冲动呢?数据量小的话,画起来还蛮简单,用viso,我前面的文章都用viso画的.之前写红黑树代码的时候,用的是命令行把整个树打印出来,不过只是一些 ...

  7. android优化（json工具，message新建/传递，avtivity深入学习视频）

    1,在线json校验工具:www.bejson.com 2, 在handler中经常使用的 message的传递上,message.what使用静态量 . private static final i ...

  8. 标准I/O库之打开和关闭流

    下列三个函数打开一个标准I/O流. #include <stdio.h> FILE *fopen( const char *restrict pathname, const char *r ...

  9. 解决Android拍照保存在系统相册不显示的问题

    可能大家都知道我们保存相册到Android手机的时候,然后去打开系统图库找不到我们想要的那张图片,那是因为我们插入的图片还没有更新的缘故,先讲解下插入系统图库的方法吧,很简单,一句代码就能实现 Med ...

  10. VB学习笔记

    stack segment stack 'stack' dw dup() ;此处输入堆栈段代码 stack ends data segment ;IBUF OBUF 看成是内存的地址,IBUF+1和I ...