看到的一个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. [Webpack 2] Optimize React size and performance with Webpack production plugins

    You can fine tune several webpack plugins to make your bundle as small as it can be for your specifi ...

  2. Android学习站点推荐

    收集了一些比較好的Android学习站点,希望对大家有所帮助: 1.http://developer.android.com/ Android官方站点,可惜被屏蔽了,须要使用FQ软件 2.http:/ ...

  3. Open quote is expected for attribute "{1}" associated with an element type "name".

    xml属性必须用引号“”,不能缺少.

  4. Android（java）学习笔记165：Android的Junit调试

    编写android应用的时候,往往我们需要编写一些业务逻辑实现类,但是我们可能不能明确这个业务逻辑是否可以成功实现,特别是逻辑代码体十分巨大的时候,我们不可能一行一行检查自己的代码,为了解决这样的问题 ...

  5. TextView使用的方式

    第一种改变TextView的方式 //      TextView tv=new TextView(this);  //      tv.setText("Hello,Android&quo ...

  6. 需要设置jdk的三处位置：

    需要设置jdk的三处位置:1.tomcat需要一个JDK : Windows--->Preferences--->MyEclipse--->Servers--->Tomcat- ...

  7. IIS 返回 405 - 不允许用于访问此页的 HTTP 谓词。终极解决办法!!!!

    首先这个问题在其他网站(CSDN,新浪博客等) 回答基本都是没有回答到"根本"上面来(而且总在纠结要不要勾选"全部谓词") 我是自己对比了本地IIS之后得出的结 ...

  8. Netbeans7.0完美中文+Consolas字体显示配置(亲测可用)

    最近把开发环境从Eclipse迁移到了Netbeans上面.因为Netbeans已经相当优秀,速度快功能也不必Eclipse差,但是一只有 一个问题一直让我对eclipse非常纠结:如果把字体选择为C ...

  9. YII缓存Cache

    缓存Cache 定义:将数据暂时存放在一个存储速度更快的介质上,下次读取数据时就可以从这个介质上来读取数据 介质:内存.文件.数据库(优化好的数据库) Yii缓存的分类:(framework/cach ...

  10. netMVC 搭建Ucenter 同步登陆退出discuz

    先看一下效果