<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 <meta name="apple-mobile-web-app-capable" content="yes">

 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <title></title>

 <style>

     *{

         padding:;

         margin:;

     }

     html,body{

         width:%;

         height:%;

         overflow: hidden;

         background: #;

     }

     canvas{

         background:#fff;

     }

     span{

         font-size: 50px;

     }

 </style>

 <script>

 function d2a(n){

     n-=;

     return n*Math.PI/;

 }

 window.onload=function(){

     var c=document.getElementsByTagName('canvas')[];

     var str='时钟';

     //准备画笔

     var gd=c.getContext('2d');

     gd.lineWidth=;

     function drawArc(start,end,r,color){

         gd.beginPath();

         gd.strokeStyle=color;

         gd.arc(,,r,d2a(start),d2a(end),false);

         gd.stroke();

     }

     function clock(){

         gd.clearRect(,,c.width,c.height)

         var oDate=new Date();

         var h=oDate.getHours();

         var m=oDate.getMinutes();

         var s=oDate.getSeconds();

         var ms=oDate.getMilliseconds();

         //秒

         drawArc(,s*+ms/*,,'red');

         //分

         drawArc(,m*,,'blue');

         //时

         drawArc(,h%*,,'green');

         //画字

         gd.font='50px a';

         gd.textAlign='center';

         gd.textBaseline='bottom';

         gd.fillText(str,,);

         gd.font='20px a';

         gd.fillText(h+':'+m+':'+s,,);

     }

     setInterval(clock,)

     clock();

 };

 </script>

 </head>

 <body>

 <canvas width="" height="">

     <span>你的浏览器不支持canvas</span>

 </canvas>

 </body>

 </html>

canvas ---个性时钟的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  3. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  4. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  6. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  7. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  8. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  9. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

随机推荐

  1. SpringMVC接收Post的实体/JSon数据

    接口代码: @ResponseBody @RequestMapping(value = "/test",method = RequestMethod.POST)/*只允许POST方 ...

  2. codeforces 721C （拓排 + DP）

    题目链接:http://codeforces.com/contest/721/problem/C 题意:从1走到n,问在时间T内最多经过多少个点,按路径顺序输出. 思路:比赛的时候只想到拓排然后就不知 ...

  3. Oracle监听小问题

    啥情况 宁波_弈风 15:17:40   宁波_弈风 15:17:49 默认配置路径 宁波_弈风 15:18:09   宁波_弈风 15:19:13 我原来一直都在SAMPLE文件里面配置和保存,因为 ...

  4. [GodLove]Wine93 Tarining Round #8

    比赛链接: http://vjudge.net/contest/view.action?cid=47644#overview 比赛来源: 2012 ACM/ICPC Asia Regional Tia ...

  5. Code Review Tools

    Code Review中文应该译作“代码审查”或是“代码评审”,这是一个流程,当开发人员写好代码后,需要让别人来review一下他的代码,这是一种有效发现BUG的方法.由此,我们可以审查代码的风格.逻 ...

  6. MINIX3

    这个系列minix3是好早看的源码  现在都忘记的差不多了 觉得就此扔掉可惜了  今天把他全部放在博客上 1 是想和大家一起讨论下 2 是没事看看 能够加强对一个稳定性系统的理解 加厚

  7. CS0016: 未能写入输出文件“c:\WINDOWS\Microsoft.NET\Framework\.。。”--“拒绝访问

    aspx 常见错误 CS0016: 未能写入输出文件“c:/WINDOWS/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/... ...

  8. 一个App Widget实例第一次创建时被调用

    事实上已经有很多的所谓的路由框架做到这一点,我也没有去研究别的,加上一直对backbone这个框架的评价不错,所以就琢磨着怎么用它实现我所需要的SPA的url管理了. 比如,你可能会说"如果 ...

  9. Collections.reverse 代码思考-超越昨天的自己系列(13)

    点进Collections.reverse的代码瞄了眼,然后就开始了一些基础知识的收集. 现在发现知道的越多,知道不知道的越多. 列几个记录下: reverse方法源码: /** * Reverses ...

  10. 设为首页 添加到收藏夹 （share）

    设为首页,添加到收藏夹 分享自:http://my.oschina.net/lyx2012/blog/60036 设为首页 和 收藏本站js代码 兼容IE,chrome,ff <script t ...