zoukankan      html  css  js  c++  java
  • canvas学习笔记--简单时钟

    1.HTML

     1 <!DOCTYPE html>
     2 <html>
     3 
     4 <head>
     5     <title>JavaScript-canvas时钟</title>
     6     <meta charset='utf-8' />
     7     <link rel="stylesheet" type="text/css" href="clock.css">
     8     <script type="text/javascript" src='clock.js'></script>
     9 </head>
    10 
    11 <body>
    12     <canvas id="canvas" widht="300" height="300" style="background-color:black">clock</canvas>
    13 </body>
    14 
    15 </html>

    2.js代码

      1 function addLoadEvent(func) {
      2     var oldonload = window.onload;
      3     if (typeof window.onload != 'function') {
      4         window.onload = func;
      5     } else {
      6         window.onload = function() {
      7             oldonload();
      8             func();
      9         }
     10     };
     11 }
     12 addLoadEvent(clock);
     13 
     14 function clock() {
     15     var canvas = document.querySelector('canvas');
     16     // 检测浏览器是否支持canvas元素
     17     if (canvas.getContext) {
     18         var context = canvas.getContext('2d');
     19 
     20         // 清空画布
     21         context.clearRect(0, 0, canvas.width, canvas.height);
     22 
     23         // 表盘
     24         context.strokeStyle = "#00FFFF";
     25         context.lineWidth = 6;
     26         context.beginPath();
     27         context.arc(150, 150, 140, 0, 2 * Math.PI, false);
     28         context.stroke();
     29         context.closePath();
     30 
     31         // 时钟刻度
     32         for (var i = 0; i < 12; i++) {
     33             // 设置并保存当前状态
     34             context.strokeStyle = "#FFFF00";
     35             context.lineWidth = 4;
     36             context.save();
     37             // 变换原点
     38             context.translate(150, 150);
     39             // 旋转角度(12小时,每小时30度)
     40             context.rotate(30 * i * Math.PI / 180);
     41             // 开始绘制
     42             context.beginPath();
     43             context.moveTo(0, -137);
     44             context.lineTo(0, -120);
     45             context.stroke();
     46             context.closePath();
     47             // 恢复原来的状态
     48             context.restore();
     49         };
     50 
     51         // 分钟刻度
     52         for (var i = 0; i < 60; i++) {
     53             context.strokeStyle = "#FFFF00";
     54             context.lineWidth = 2;
     55             context.save();
     56             context.translate(150, 150);
     57             // 旋转角度(60分钟,每分钟6度)
     58             context.rotate(6 * i * Math.PI / 180);
     59             context.beginPath();
     60             context.moveTo(0, -137);
     61             context.lineTo(0, -127);
     62             context.stroke();
     63             context.closePath();
     64             context.restore();
     65         };
     66 
     67         // 根据当前时间绘制时针、分针、秒针
     68         var now = new Date();
     69         var sec = now.getSeconds();
     70         var min = now.getMinutes();
     71         var hour = now.getHours();
     72         hour > 12 ? hour - 12 : hour;
     73         hour += (min / 60);
     74         min += (sec / 60);
     75 
     76         //-----------------------------时针-----------------------------
     77         context.save();
     78         context.lineWidth = 5;
     79         context.strokeStyle = "#00FFFF";
     80         context.translate(150, 150);
     81         context.rotate(hour * 30 * Math.PI / 180); //每小时旋转30度
     82         context.beginPath();
     83         context.moveTo(0, -70);
     84         context.lineTo(0, 10);
     85         context.stroke();
     86         context.closePath();
     87         // 这里一定要返回上一级,恢复之前的状态
     88         context.restore();
     89 
     90         //-----------------------------分针-----------------------------
     91         context.save();
     92         context.lineWidth = 3;
     93         context.strokeStyle = "#FFFF00";
     94         context.translate(150, 150);
     95         context.rotate(min * 6 * Math.PI / 180); //每分钟旋转6度
     96         context.beginPath();
     97         context.moveTo(0, -100);
     98         context.lineTo(0, 10);
     99         context.stroke();
    100         context.closePath();
    101         // 这里一定要返回上一级,恢复之前的状态
    102         context.restore();
    103 
    104         //-----------------------------秒针-----------------------------
    105         context.save();
    106         context.lineWidth = 2;
    107         context.strokeStyle = "#FF0000";
    108         context.translate(150, 150);
    109         context.rotate(sec * 6 * Math.PI / 180); //每秒旋转6度
    110         context.beginPath();
    111         context.moveTo(0, -120);
    112         context.lineTo(0, 10);
    113         context.stroke();
    114         context.closePath();
    115         // 这里一定要返回上一级,恢复之前的状态
    116         context.restore();
    117 
    118         // 电子时钟
    119         hour = now.getHours();
    120         min = now.getMinutes();
    121         if (hour >= 10) {
    122             hour = hour;
    123         } else {
    124             hour = "0" + hour;
    125         };
    126         if (min >= 10) {
    127             min = min;
    128         } else {
    129             min = "0" + min;
    130         };
    131         if (sec >= 10) {
    132             sec = sec;
    133         } else {
    134             sec = "0" + sec;
    135         };
    136         context.font = "18px 微软雅黑";
    137         context.lineWidth = 2;
    138         context.fillStyle = "#0000FF";
    139         context.textAlign = "center";
    140         context.textBaseline = "middle";
    141         context.fillText(hour + ":" + min + ":" + sec, 150, 250);
    142     };
    143     setTimeout(clock, 1000);
    144 }
  • 相关阅读:
    The Future of Middleware and the BizTalk Roadmap
    FW: How to spawn a process that runs under the context of the impersonated user in Microsoft ASP.NET pages
    Strips illegal Xml characters
    luogu P2280 激光炸弹(二维前缀和)
    luogu P2704 炮兵阵地(经典状态压缩DP)
    SP1716 GSS3 Can you answer these queries III (线段树维护最大连续子段和)
    二分图判定、匹配问题
    C++语法综合 | 基于char*设计一个字符串类MyString
    luogu P1044 火车进出栈问题(Catalan数)
    C++设计模式 | 三种设计模式基础
  • 原文地址:https://www.cnblogs.com/guiren/p/4941664.html
Copyright © 2011-2022 走看看