<!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. 微信公众号实现zaabix报警2017脚本（升级企业微信后）

    #!/bin/bash CropID='xxxxxxxxxxxxxxxxx' Secret='xxxxxxxxxxxxxxxx' GURL="https://qyapi.weixin.qq. ...

  2. SELinux简介

    Security-Enhanced Linux (SELinux)由以下两部分组成: 1) Kernel SELinux模块(/kernel/security/selinux) 2) 用户态工具 SE ...

  3. 高并发分布式系统如何做到唯一Id

    又一个多月没冒泡了,其实最近学了些东西,但是没有安排时间整理成博文,后续再奉上.最近还写了一个发邮件的组件以及性能测试请看 <NET开发邮件发送功能的全面教程(含邮件组件源码)> ,还弄了 ...

  4. jQuery左右选择框

    <!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...

  5. 【转】CStdioFile UNICODE编译 英文系统下读取中文汉字乱码解决

    转载出处:http://www.cnblogs.com/ct0421/p/3242418.html 函数原形为:char *setlocale( int category, const char *l ...

  6. Java面试题全集（上）(中)（下） （转）+自己总结

    Java面试题 自己总总结 https://www.cnblogs.com/songanwei/p/9366427.html Java面试题全集(上) https://blog.csdn.net/ja ...

  7. 【BZOJ4538】[Hnoi2016]网络 整体二分+树状数组

    [BZOJ4538][Hnoi2016]网络 Description 一个简单的网络系统可以被描述成一棵无根树.每个节点为一个服务器.连接服务器与服务器的数据线则看做一条树边.两个服务器进行数据的交互 ...

  8. [Algorithms] Topological Sort

    Topological sort is an important application of DFS in directed acyclic graphs (DAG). For each edge ...

  9. 160714、解决虚拟机上的tomcat无法被主机访问的问题

    备注:我虚拟机是centos 6.5    在wmware中安装linux后安装好数据库,JDK及tomcat后启动服务,虚拟机中可以访问,但是主机却无法访问,但是同时主机和虚拟机之间可以ping的通 ...

  10. HTTP协议包分析（小马上传大马）

    最近工作内容是分析防火墙日志,看日志是正确,本地实验小马上传大马  抓取http包如下.可以在分析过程中进行借鉴. 该http请求的行为是通过小马,在小马的当前目录创建一个dama.php的文件,文件 ...