在见识了html5中canvas的强大，笔者准备制作一个简易时钟。

　　下面就是成果啦，制作之前我们先分析一下，绘制一个时钟需要做哪些准备。

一 、

1.首先这个时钟分为表盘，指针（时针，分针，秒针）和数字三部分。

2.表盘是个圆，这个简单。

3.绘制指针时，需要先获取到系统时间，然后找到时间和角度的关系。

4.然后利用画圆函数，把起始和终点设为同一角度，即可画出以圆心为起点的射线（指针）了。

 二、

接下来，我们再分析一下，绘制时钟需要用到的函数。

1.arc(x, y, r, start, stop)

x, y, r : 分别是圆的圆心坐标和半径。

start：起始角，以弧度计

stop : 结束角， 以弧度计

这里涉及到弧度的问题。角度和弧度的关系式：指针的角度 * Math.PI / 180 = 弧度。

 三、

现在就剩下如何利用获取到的系统时间转化为 函数所需要的角度（弧度）了。

时钟一圈分为12个小时，60分钟，60秒。所以30°一小时，6°一分钟， 6°一秒。

理所应当的 指针的角度 = 时间 * 对应的角度 即可得到我们所需的时间，但是我们这个计算方式是以0°在时钟的12点钟为基准的。

而canvas里的0°的地方是在时钟的三点钟方向。（一定要注意这个问题）。

而且以右为X轴，以下为Y轴的正方向。

所以还需要减去一个90 才是我们需要的结果

指针的角度 = 时间 * 对应的角度 - 90

另外 为了模拟真实的时针的走动（即分针走一分钟，时针也跟着走一点点，而不是走完60分钟时针才走一格），

只需要在计算时针角度的时候加上分钟的一半（60/2=30，刚好是时针一格的度数）。

四、上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="can">

        当前浏览器不支持！

    </canvas>

<script>

    var x1 = 300;

    var y1 = 300;　　　　　　　　　　　　　　　　　　　　　　　 //时钟圆心位置

    var c = document.getElementById("can");

    var ca = can.getContext("2d");

    c.width = 400;

    c.height = 400;　　　　　　　　　　　　　　　　　　　　　　//画布大小

    setInterval(function() {

        ca.clearRect(0, 0, 400, 400);

        rtime(x1, y1);

    },50)　　　　　　　　　　　　　　　　　　　　　　　　　　　　//让时钟走起来

    function rtime(x, y) {

        var da1 = new Date();

        var h = parseInt(da1.getHours());

        var m = parseInt(da1.getMinutes());

        var s = parseInt(da1.getSeconds());　　　　　　　　//获取系统时间

        var h1 = (h * 30 - 90 + m / 2) * Math.PI / 180;

        var m1 = (m * 6 - 90) * Math.PI / 180;

        var s1 = (s * 6 - 90) * Math.PI / 180;　　　　　　//转化为函数所需要的弧度

        ca.beginPath();

        ca.lineWidth = 6;

        ca.arc(x, y, 70, 0, 2*Math.PI);

        ca.stroke();　　　　　　　　　　　　　　　　　　　　　　//绘制表盘

        ca.lineWidth = 1;

        ca.font = "18px";

        ca.strokeText("12",x-9, y-50);

        ca.strokeText("6",x-3, y+60);

        ca.strokeText("9",x-60, y+5);

        ca.strokeText("3",x+55, y+5);　　　　　　　　　　　　//绘制数字

        ca.beginPath();

        ca.lineWidth = 3;

        ca.lineCap="round";

        ca.moveTo(x,y);

        ca.arc(x, y, 35, h1, h1);

        ca.stroke();　　　　　　　　　　　　　　　　　　　　　　//绘制时针

        ca.beginPath();

        ca.lineWidth = 2;

        ca.lineCap="round";

        ca.moveTo(x,y);

        ca.arc(x, y, 45, m1, m1);

        ca.stroke();　　　　　　　　　　　　　　　　　　　　　　//绘制分针

        ca.beginPath();

        ca.lineWidth = 1;

        ca.lineCap="round";

        ca.moveTo(x,y);

        ca.arc(x, y, 55, s1, s1);

        ca.stroke();　　　　　　　　　　　　　　　　　　　　　　//绘制秒针

    }

    </script>

</body>

</html>

以上就是用canvas绘制时钟的所有内容啦，有兴趣的朋友们，可以在此基础上绘制出各种各样的时钟啦。

用canvas绘制一个简易时钟的更多相关文章

  1. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  2. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  3. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  4. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

  5. iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”

    最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想 ...

  6. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  7. Canvas 绘制一个像素风电子时钟

    想法是在 Canvas 上绘制由小方块组成的数字. 第一步是实现绘制小方块的方法,先画出一个边长为 5 的 10x10 个方块,使用两个 for 循环很简单就能完成. for (let i = 0; ...

  8. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. 用canvas写一个简易画图工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. CI框架源码学习笔记4——Benchmark.php

    我们回到Codeigniter.php上继续往下看,第一个引入的类文件是Benchmark.php,这个文件主要是提供基准测试,具体使用方法参考手册http://codeigniter.org.cn/ ...

  2. linux文件系统总结

    apue中:其中进程表项内部的数组又称为 进程打开文件表    另外一个角度: 从linux内核角度开: task_struct是进程描述符对应上面的进程表项,在task_struct描述符中有str ...

  3. stl仿函数和适配器

    所谓的适配器就是底层利用仿函数,然后修改仿函数的接口,达到自己的目的: 例如:template<class operation> class binder1st的适配器,其本质是一个类,它 ...

  4. [转载]sscanf函数

    来源:http://c.biancheng.net/cpp/html/296.html 头文件:#include <stdio.h> sscanf()函数用于从字符串中读取指定格式的数据, ...

  5. ie7,ie8 js中变量名和页面元素ID重名，报错

    js变量名和一个div的id重名,报错.不知所以然...做个标记

  6. Applese 涂颜色（python解法）

    链接:https://ac.nowcoder.com/acm/contest/330/E 来源:牛客网 题目描述 精通程序设计的 Applese 叕写了一个游戏. 在这个游戏中,有一个 n 行 m 列 ...

  7. 从M进制转换为N进制

    /// <summary> /// 从M进制转换为N进制 /// </summary> internal class MBase2NBase { /// <summary ...

  8. 简单的Web日志分析脚本

    前言 长话短说,事情的起因是这样的,由于工作原因需要分析网站日志,服务器是windows,iis日志,在网上找了找,github找了找,居然没找到,看来只有自己动手丰衣足食. 那么分析方法我大致可分为 ...

  9. git命令行操作：拉不到最新代码???

    现场场景:   仓库中有一个包名使用了驼峰命名,还有一个非驼峰的同名包, windows系统下因为不区分文件夹大小写,拉取没问题,但是本地push不上去.打算到Linux上clone下来后,删除那个驼 ...

  10. 第一章javascript简介

    javascript 当诞生于1995 最开始是目的是处理在服务器端进行的表单验证:让其在服务器端验证改为在服务端验证,大大提高速度(当时网络慢) 如今javascript是一门功能全面的语言,包含闭 ...