1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Canvas 之 时钟 Demo</title>
  5.     <!--简单 样式模版-->
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.             font-family: YaHei Consolas Hybrid,宋体;
  12.             font-size: 14px;
  13.             list-style: none;
  14.         }
  15.         .wrapper
  16.         {
  17.             margin: 50px auto;
  18.             width: 400px;
  19.             padding: 10px;
  20.             border: solid 1px gray;
  21.             background-color: #eee;
  22.             overflow:auto;
  23.         }/*H1浅蓝阴刻字*/
  24.         body
  25.         {
  26.             background-color: gray;
  27.         }
  28.         h1
  29.         {
  30.             text-align: center;
  31.             display: block;
  32.             background-color: #C4DEF7;
  33.             color: #344251;
  34.             font: normal 30px "微软雅黑";
  35.             text-shadow: 1px 1px 0px #DEF3FF;
  36.             padding: 5px 0px;
  37.             margin:10px;
  38.             box-shadow: 0px 2px 6px #000;
  39.             border-radius:10px;
  40.         }
  41.         input[type='button'],input[type='submit'] { padding:2px 5px;}
  42.  
  43.         #clockMap { background-color:White;}
  44.         </style>
  45. </head>
  46. <body>
  47.     <h1>
  48.         Canvas 之 时钟 Demo
  49.     </h1>
  50.     <div class="wrapper">
  51.         <canvas width="400" height="400" id="clockMap"></canvas>
  52.         <script type="text/javascript">
  53.             //获取画面DOM对象
  54.             var canvas = document.getElementById("clockMap");
  55.             //获取2D画布的上下文
  56.             var map = canvas.getContext("2d");
  57.  
  58.             //格式化时间格式为00:00:00来显示
  59.             var formatTime = function (time) {
  60.                 return time < 10 ? "0" + time : time;
  61.             }
  62.  
  63.             //注意：在画时分秒的针时，一定要先保存环境，画完再回到环境中，不能一次画三针
  64.             var drawClock = function () {
  65.                 //清屏
  66.                 map.clearRect(0, 0, 400, 400);
  67.                 //保存当前环境
  68.                 map.save();
  69.  
  70.                 //绘制表盘
  71.                 map.beginPath();
  72.                 map.lineWidth = 10;
  73.                 map.storkeStyle = "black";
  74.                 map.arc(200, 200, 150, 0, 360, true);
  75.                 map.stroke();
  76.                 map.closePath();
  77.  
  78.                 //绘制刻度
  79.                 map.translate(200, 200);
  80.                 for (var i = 0; i < 60; i++) {
  81.                     if (i % 5 == 0) {
  82.                         map.beginPath();
  83.                         map.lineWidth = 4;
  84.                         map.strokeStyle = "red";
  85.                         map.moveTo(135, 0);
  86.                         map.lineTo(143, 0);
  87.                         map.stroke();
  88.                         map.closePath();
  89.                     }
  90.                     else {
  91.                         map.beginPath();
  92.                         map.lineWidth = 2;
  93.                         map.strokeStyle = "black";
  94.                         map.moveTo(140, 0);
  95.                         map.lineTo(143, 0);
  96.                         map.stroke();
  97.                         map.closePath();
  98.                     }
  99.                     map.rotate(6 * Math.PI / 180);
  100.                 }
  101.  
  102.                 //绘制数字
  103.                 map.textAlign = "center";
  104.                 map.textBaseline = "middle";
  105.                 map.font = "bold 30px Arial";
  106.                 map.fillText("3", 115, 0);
  107.                 map.fillText("6", 0, 115);
  108.                 map.fillText("9", -115, 0);
  109.                 map.fillText("12", 0, -115);
  110.  
  111.                 //========绘制时针，分针，秒针========
  112.                 //获取当前时间
  113.                 var date = new Date();
  114.                 var hours = date.getHours();
  115.                 var minute = date.getMinutes();
  116.                 var seconds = date.getSeconds();
  117.                 hours = hours > 12 ? hours - 12 : hours;
  118.                 var hour = hours + minute / 60;
  119.  
  120.                 //绘制时针
  121.                 map.save();
  122.                 map.beginPath();
  123.                 map.rotate((hour * 30 - 90) * Math.PI / 180);
  124.                 map.lineWidth = 6;
  125.                 map.moveTo(-10, 0);
  126.                 map.lineTo(90, 0);
  127.                 map.closePath();
  128.                 map.stroke();
  129.                 map.restore();
  130.  
  131.                 //绘制分针
  132.                 map.save();
  133.                 map.beginPath();
  134.                 map.rotate((minute * 6 - 90) * Math.PI / 180);
  135.                 map.lineWidth = 4;
  136.                 map.moveTo(-10, 0);
  137.                 map.lineTo(132, 0);
  138.                 map.closePath();
  139.                 map.stroke();
  140.                 map.restore();
  141.  
  142.                 //绘制秒针
  143.                 map.save();
  144.                 map.beginPath();
  145.                 map.rotate((seconds * 6 - 90) * Math.PI / 180);
  146.                 map.lineWidth = 2;
  147.                 map.strokeStyle = "red";
  148.                 map.moveTo(-10, 0);
  149.                 map.lineTo(138, 0);
  150.                 map.closePath();
  151.                 map.stroke();
  152.                 map.restore();
  153.  
  154.                 //中心点
  155.                 map.save();
  156.                 map.beginPath();
  157.                 map.arc(0, 0, 4, 0, 360, true);
  158.                 map.closePath();
  159.                 map.lineWidth = 2;
  160.                 map.strokeStyle = "red";
  161.                 map.fill();
  162.                 map.stroke();
  163.                 map.restore();
  164.  
  165.                 //时间显示
  166.                 map.save();
  167.                 map.font = "24px Arial";
  168.                 map.fillText("当前时间："+formatTime(hours) + ":" + formatTime(minute) + ":" + formatTime(seconds), -1, -180);
  169.                 map.restore();
  170.  
  171.                 //将画好的时钟显示在之前保存的环境中
  172.                 map.restore();
  173.             }
  174.  
  175.             //加载时，执行一次，避免刷新时，有一秒的延迟
  176.             drawClock();
  177.  
  178.             //开启定时器
  179.             window.setInterval(drawClock, 1000);
  180.         </script>
  181.     </div>
  182. </body>
  183. </html>
  1. 效果图：
  1.  
  1.  

HTML5 之Canvas 绘制时钟 Demo的更多相关文章

  1. 使用canvas绘制时钟

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

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

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

  3. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  4. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  5. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  6. 小任务之Canvas绘制时钟

    背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...

  7. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. 用canvas绘制时钟

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

  9. HTML5 Canvas 绘制时钟

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

随机推荐

  1. Unity 插件制作笔记（持续更新）

    示例: [MenuItem(Menu1/Menu2)] static void TestMenu1() { Debug.log("点击了菜单"); } 导航菜单添加 [MenuIt ...

  2. Centos7更新firefox

    1.用你本地的旧版 firefox,访问http://www.firefox.com.cn,下载Linux版本的Firefox. 2.进入存放下载文件(Firefox-latest-x86_64.ta ...

  3. Linux命令：简单函数调用

    脚本编程之函数: function: 功能       结构化编程,不能独立运行,需要调用时执行,可以被多次调用 1.定义一个函数:function FUNCNAME {  command} FUNC ...

  4. MooseFs-分布式文件系统系列（一）之了解并安装它

    preface 在上上家公司,曾维护过公司的MFS文件系统,主要用来存储系统日志文件,单纯的把日志当作文件存储,在当时的架构下,MFS就像一个中间站一样,这边程序生成的日志放入MFS,那边日志分析程序 ...

  5. HD1814Peaceful Commission(模板题）

    题目链接 题意: 和平委员会 根据宪法,Byteland民主共和国的公众和平委员会应该在国会中通过立法程序来创立. 不幸的是,由于某些党派代表之间的不和睦而使得这件事存在障碍. 此委员会必须满足下列条 ...

  6. ecshop 远程图片本地化

    define('IN_ECS', true); require(dirname(__FILE__) . '/includes/init.php'); $smarty->assign('siteD ...

  7. zabbix 3.0快速安装简介（centos 6）

    zabbix快速安装 系统版本:centos 6 1.yum源配置和zabbix.msyql安装 rpm -ivh http://mirrors.aliyun.com/zabbix/zabbix/3. ...

  8. StringUtils 的常用方法

    StringUtils 方法的操作对象是 Java.lang.String 类型的对象,是 JDK 提供的 String 类型操作方法的补充,并且是 null 安全的(即如果输入参数 String 为 ...

  9. 20145212 《Java程序设计》第3周学习总结

    20145212 <Java程序设计>第3周学习总结 教材学习内容总结 教材第四章知识点总结 面向对象和面向过程: 面向对象是相对面向过程而言的,面向过程强调的是功能行为,面向对象是将过程 ...

  10. asp+mysql__不同类型用户登录

    未防注入//0.0 /***这里代码应用场景为多类用户登录,根据用户选择不同的单选按钮判断用户登录的类型,*从而进行不同的数据表进行判断,用户的用户名和密码是否正确.*/ public partial ...