<!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. win7系统

    网址:http://www.xitongma.com/Windows7/ 使用方法:http://www.cnblogs.com/henrychan688/p/5223935.html

  2. Alpha matting算法发展

    一.抠图算法简介 Alpha matting算法研究的是如何将一幅图像中的前景信息和背景信息分离的问题,即抠图.这类问题是数字图像处理与数字图像编辑领域中的一类经典问题,广泛应用于视频编缉与视频分割领 ...

  3. 【BZOJ3876】[Ahoi2014]支线剧情 有上下界费用流

    [BZOJ3876][Ahoi2014]支线剧情 Description [故事背景] 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩 ...

  4. 【BZOJ4259】残缺的字符串 FFT

    [BZOJ4259]残缺的字符串 Description 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时, ...

  5. vue+node+mongoDB 火车票H5（一）---准备工作，基本配置

    前端菜鸟一枚,由于公司项目用到了vue,我虽然参与了,但是很多环境配置和流程还不是特别清楚,就想自己个人业余做个webapp看看, 对于完全新手而言,很多坑会纠结很久,所以想借此机会自己做的同时记录各 ...

  6. pt-online-schema-change 和 oak-online-alter-table功能对比

    今天再查看文档的时候突然看到了oak-online-alter-table执行在线ddl,以前只使用过pt-online-schema.所以这里收集一些资料对比下差异,方便日后自己查阅. 一.oak- ...

  7. C# WinForm 中进行UrlEncode

    public static string ToUrlEncode(string strCode) { StringBuilder sb = new StringBuilder(); byte[] by ...

  8. 【转】清空mysql一个库中的所有表的数据

    方法1:重建库和表 用mysqldump --no-data把建表SQL导出来,然后drop database再create database,执行一下导出的SQL文件: 方法2:生成清空所有表的SQ ...

  9. 我的Android进阶之旅------>解决Android Studio编译后安装apk报错：The APK file does not exist on disk

    1.错误描述 今天用Android Studio编译应用后安装APK的时候,报错了,错误如下所示: The APK file build\outputs\apk\OYP_2.3.4_I2Base_64 ...

  10. Keras网络层之“关于Keras的层(Layer)”

    关于Keras的“层”(Layer) 所有的Keras层对象都有如下方法: layer.get_weights():返回层的权重(numpy array) layer.set_weights(weig ...