看到的一个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. ThinkPHP函数详解：M方法

    M方法用于实例化一个基础模型类,和D方法的区别在于:1.不需要自定义模型类,减少IO加载,性能较好:2.实例化后只能调用基础模型类(默认是Model类)中的方法:3.可以在实例化的时候指定表前缀.数据 ...

  2. js与事件处理

    1. <a href="javascript:showModalDialog('../TrainingReq/QryTermCourseInfo.aspx?TermCourseID=& ...

  3. ubuntu12.04的vim配置

    ubuntu12.04中使用的vim的版本不支持像语法高亮和文件类型检测等配置 #sudo apt-get install vim vim默认的配置使用起来还不能让人满意,还需要自己配置默认配置文件是 ...

  4. [GIF] GIF Loop Coder - Animation Functions

    Previous, we animate the item by passing an array to tell the start position and end position. To ma ...

  5. java13 InputStream，Reader

    流的方向: .输入流:数据源到程序(InputStream,Reader读进来). .输出流:程序到目的地(OutPutStream,Writer写出来). 处理数据单元: 字节流:按照字节读取数据( ...

  6. MyJFrame（文本）界面的建立

    import java.awt.Color;import java.awt.Component;import java.awt.Container;import java.awt.FlowLayout ...

  7. PHP中将数据库中的数据显示在网页

    最近没事把以前的东西感觉还可以的又简单的看了以下,因为还在学习新的东西,所以,发表的博客也不是很多,也许是有感而发吧. 这次讲的是mysql数据库中的数据使用php如何显示在网页中.首先,先建好自己的 ...

  8. php插件机制实现原理

    插件,亦即Plug-in,是指一类特定的功能模块(通常由第三方开发者实现) 它的特点: 1. 随时安装.卸载.激活.禁用 2. 无论什么状态都不影响系统核心模块的运行, 3. 是一种非侵入式的模块化设 ...

  9. sql 随机生成中文名字

    ,) )) -- 姓氏 ,) )) -- 名字 INSERT @fName VALUES ('赵'),('钱'),('孙'),('李'),('周'),('吴'),('郑'),('王'),('冯'),( ...

  10. (转)了解了这些才能开始发挥jQuery的威力

    原文地址:http://www.cnblogs.com/dolphinX/p/3347677.html 由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQu ...