在见识了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. P1505 [国家集训队]旅游

    \(\color{#0066ff}{题 目 描 述}\) Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了 ...

  2. PAT天梯赛L1-020 帅到没朋友

    题目链接:点击打开链接 当芸芸众生忙着在朋友圈中发照片的时候,总有一些人因为太帅而没有朋友.本题就要求你找出那些帅到没有朋友的人. 输入格式: 输入第一行给出一个正整数N(<=100),是已知朋 ...

  3. vue.js路由嵌套传参

    通过配置路由时候按照: path:/user/:username/age/:age 这种就可以把参数传递 接受: $routes.params 接受到的是一个json格式的数据,

  4. (转)接口自动化测试之http请求实践总结

    一.接口测试的基本思路 1.确定要测试接口的请求类型.接口是get请求还是post请求. 2.确定接口的参数.需要传输的参数有哪些,类型分别是什么,都有哪些要求等. 3.按照参数要求构造请求需要的参数 ...

  5. Unity 关节

    引言 关节组件一共分为5大类,它们分别是链条关节.固定关节.弹簧关节.角色关节和可配置关节. 链条关节(Hinge Joint):将两个物体以链条的形式绑在一起,当力量过大超过链条的固定力矩时,两个物 ...

  6. Liunx 发送邮件

    可以使用rpm -qa | grep mailx查看系统自带的mailx版本. 使用wget http://sourceforge.net/projects/heirloom/files/latest ...

  7. 设置IIS，使客户端访问服务器上的文件

    1.打开IIS控制器——"运行-cmd-inetmgr-回车“ 2.选中要设置的网站 3.右键,添加虚拟目录 4.如上图所示,在别名处输入文件目录的名称,物理路径要选择文件在磁盘上的存储根目 ...

  8. 华东交通大学2015年ACM“双基”程序设计竞赛1005

    Problem E Time Limit : 3000/2000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  9. 如何避免遗漏bug

    bug遗漏,我想这个是很多公司很多人头痛的一个问题.众所周知,bug是不可能被完全消灭的,当然也就意味着在发布前不能被全部找出来.于是乎当项目发布后,或多或少都会出现bug遗漏的现象,即使发布初期没有 ...

  10. How to Setup MySQL (Master-Slave) Replication in CentOS

    The following tutorial aims to provide you a simple step-by-step guide for setting up MySQL (Master- ...