<!doctype html>

 <html>

     <head>

         <title>canvas</title>

     </head>

     <body>

         <canvas id = "clock" width = "500px" height = "500px">

             您的浏览器已过时，请更新！

         </canvas>

         <script type = "text/javascript">

             var clock = document.getElementById("clock");

             var cxt = clock.getContext("2d");

             function drawClock(x) {

                 var y = x / 2;

                 var r = (x - 100) / 2;

                 var x1 = r - 10;

                 var x2 = r - 20;

                 var x3 = r - 30;

                 var x4 = r - 40;

                 var x5 = r - 50;

                 //清除画布

                 cxt.clearRect(0, 0, x, x);

                 var now = new Date;

                 var sec = now.getSeconds();

                 var min = now.getMinutes();

                 var hour = now.getHours();

                 //解决时针的问题：1、小时之间  2、19:59:30s

                 hour += min / 60;

                 hour = hour > 12 ? hour - 12 : hour;

                 //表盘

                 cxt.lineWidth = 10;

                 cxt.strokeStyle = "blue";

                 cxt.beginPath();

                 cxt.arc(y, y, r, 0, 360, false);

                 cxt.closePath();

                 cxt.stroke();

                 //时刻度

                 for (var i = 0; i < 12;i++ ) {

                     cxt.save();

                     cxt.lineWidth = 7;

                     cxt.strokeStyle = "#000";

                     cxt.translate(y, y);

                     cxt.rotate(i*30 * Math.PI / 180);

                     cxt.beginPath();

                     cxt.moveTo(0, -x1);

                     cxt.lineTo(0, -x3);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();

                 }

                 //分刻度

                 for (var i = 0; i < 60; i++) {

                     cxt.save();

                     cxt.lineWidth = 5;

                     cxt.strokeStyle = "#000";

                     cxt.translate(y, y);

                     cxt.rotate(i * 6 * Math.PI / 180);

                     cxt.beginPath();

                     cxt.moveTo(0, -x1);

                     cxt.lineTo(0, -x2);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();

                 }

                 //时针

                 cxt.save();

                 cxt.lineWidth = 7;

                 cxt.strokeStyle = "#000";

                 cxt.translate(y, y);

                 cxt.rotate(hour * 30 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x5);

                 cxt.lineTo(0, 10);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

                 //分针

                 cxt.save();

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.translate(y, y);

                 cxt.rotate(min * 6 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x4);

                 cxt.lineTo(0, 15);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

                 //秒针

                 cxt.save();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.translate(y, y);

                 cxt.rotate(sec * 6 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x3);

                 cxt.lineTo(0, 20);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.beginPath();

                 cxt.arc(0, 0, 5, 0, 360, false);

                 cxt.fillStyle = "gray";

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.fillStyle = "red";

                 cxt.beginPath();

                 cxt.arc(0, -x5, 5, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

             }

             //行走

             drawClock(500);

             setInterval("drawClock(500)", 1000);

         </script>

     </body>

 </html>

html5 canvas js(时钟)的更多相关文章

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

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

  2. HTML5 Canvas爱心时钟代码

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

  3. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  4. html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

  5. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  6. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  9. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

随机推荐

  1. MATLAB中的文件类型总结

    %   ***.m文件 : 脚本文件或者函数文件或者:%   ***.mat文件:数据存储文件(二进制文件,可以ASCII码形式保存和加载,%                类似于单行EXCEL表格) ...

  2. js 安全

    0x00 前言 在信息安全领域,可信系统(Trusted system)是一个让人心动的目标,它指的是一个通过实施特定的安全策略而达到一定可信程度的系统. 在计算机中,可信平台模块(Trusted P ...

  3. bnuoj 34990(后缀数组 或 hash+二分)

    后缀数组倍增算法超时,听说用3DC可以勉强过,不愿写了,直接用hash+二分求出log(n)的时间查询两个字符串之间的任意两个位置的最长前缀. 我自己在想hash的时候一直在考虑hash成数值时MOD ...

  4. 【BZOJ1491】[NOI2007]社交网络 Floyd

    [BZOJ1491][NOI2007]社交网络 Description 在社交网络(socialnetwork)的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题. 在一个社交圈子 ...

  5. text-align:justify 使用参考

    对 text-align:justify 不大了解的,可以先看这里:从css text-align:justify 谈谈 text-align 文本对齐方式,讲的比较浅显易懂,本篇相对深入些,最好先看 ...

  6. 160704、commons-beanutils.jar常用方法

    package com.test.beanutils; import java.lang.reflect.InvocationTargetException;import java.text.Pars ...

  7. 求其中同一个主叫号码的两次通话之间间隔大于10秒的通话记录ID

    求其中同一个主叫号码的两次通话之间间隔大于10秒的通话记录ID 例如:6,7,8,9,10条记录均符合 ID 主叫号码 被叫号码      通话起始时间            通话结束时间       ...

  8. JavaScript-烂笔头

    JavaScript 对大小写敏感 注释单行用:// 注释多汗用:/* */ 声明变量:var 变量名 (未使用值来声明的变量,值为undefined) JavaScript 变量均为对象 可以使用关 ...

  9. 【我的Android进阶之旅】Android使用getIdentifier()方法根据资源名来获取资源id

    有时候我们想动态的根据一个资源名获得到对应的资源id,就可以使用getResources().getIdentifier()方法来获取该id.然后再使用该id进行相关的操作. 1.Demo示例 下面用 ...

  10. 我的Android进阶之旅------>Android studio 如何修改工程的包名

    关于用Android Studio修改Android APP的应用包名的问题,今天遇到了一个坑,这里记录一下. 这里用一个简单的Demo来展示在Android Studio中如何修改Android P ...