在见识了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. js 遍历tree的一个例子（全遍历）

    全遍历 亲测真是有效. 工作中遇到的问题应该算是比较有价值的问题. <!DOCTYPE html> <html lang="en"> <head> ...

  2. linux系统安全加固--账号相关

    linux系统安全加固 一.账号相关 1.禁用或删除无用账号 减少系统无用账号,降低安全风险. 当我们的系统安装完毕后,系统默认自带了一些虚拟账户,比如bin.adm.lp.games.postfix ...

  3. HDU - 1042-N!(Java)

    Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input One N in one line, process to ...

  4. 关于c语言的位运算&，|，^（看懂汉字的都能看懂）

    其中|,&可以当作逻辑运算符,当|,&当成逻辑运算符时,与||,&&的用法基本相似,&&,||运算时会当前面的表达式能够决定整个表达式,则不进行对后面的 ...

  5. 找出区间[A, B]内所有数字的奇数字位出现次数为偶数，偶数字位出现次数为计数的数的个数。（数位DP）

    题目:找出区间[A, B]内所有数字的奇数字位出现次数为偶数,偶数字位出现次数为计数的数的个数. 分析:这道题的状态同样不好取,因为要求每一个奇数的个数都要为偶数,每一个偶数的位数都要为奇数,又因为只 ...

  6. hxml总结

    段落<p> br 换行 hr 分割线 &nbsp 空格 &gt  > &lt < &  &amp h        7级标题 <i ...

  7. zabbix 安装使用

    zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决 ...

  8. vmware 三种连接方式 如何设置独立ip

    转载:https://blog.csdn.net/xiaoyangsavvy/article/details/73718473

  9. Ubuntu下安装Tomcate

    1.官网下载安装包 http://tomcat.apache.org/download-80.cgi#8.5.9 2.解压 tar -zxvf apache-tomcat-.tar.gz 3.移动到/ ...

  10. vue中methods函数调用methods函数写法

    export default { data() { return { hello:"你好" } }, methods:{ open(that) { that.hello = &qu ...