<!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. java中的类、成员变量、方法的修饰符。

    http://blog.sina.com.cn/s/blog_7ffb8dd501011alw.html http://www.cnblogs.com/lixiaolun/p/4311727.html

  2. IO文件读写

    *b表示二进制模式访问,但是对于Linux或者Unix系统来说这个模式没有任何意义,因为他们把所有文件都看做二进制文件,包括文本文件 一.三种方法读取文件  方法1:open f=open(" ...

  3. linux DNS服务

    DNS服务器的安装和配置 首先在终端输入命令#vi  /etc/apt/sources.list 输入更新源 # kali repos installed by TARDIS deb http://h ...

  4. JB开发之三 [jailbreak，越狱技术积累]

    很兴奋,我开始了进行JB的开发 1.杀死当前的APP [(SpringBoard *)[UIApplicationsharedApplication] _killThermallyActiveAppl ...

  5. 1、Android自己的下拉刷新SwipeRefreshLayout

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/ ...

  6. 《转》架设一个BLOG需要整合多少东西？

    本文转载自大CC 1 Wordpress本身需要花费功夫的地方不多,比较容易,但Themes要花不少功夫调整,有时还得改CSS.推荐几个Wordpress Themes网站: - http://the ...

  7. JZOJ.5285【NOIP2017模拟8.16】排序

    Description

  8. Oracle Instant Client的安装和使用

    转自:https://www.cnblogs.com/chinalantian/archive/2011/09/09/2172145.html 根据自己需求到Oracle网站(http://www.o ...

  9. php获取本地IP

    function get_local_ip() { $preg = "/\A((([0-9]?[0-9])|(1[0-9]{2})|(2[0-4][0-9])|(25[0-5]))\.){3 ...

  10. 超哥带你学网络编程部分blog

    https://www.cnblogs.com/clschao/articles/9593164.html  网络编程 https://www.cnblogs.com/clschao/articles ...