在见识了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. luogu1632 点的移动

    其实只需要开三重循环 根据OI中的一个重要的原理 给定一个序列a,求一个数x使得\(\sum |a_i-x|\)最小,那么这个数是序列a的中位数 证明略 然后既然是中位数,一定是数列中的数,类比到这题 ...

  2. js按回车事件提交

    $(document).keyup(function (event) { if (event.keyCode == "13") { document.getElementById( ...

  3. PHP删除目录下的空目录

    function rm_empty_dir($path){       if(is_dir($path) && ($handle = opendir($path))!==false){ ...

  4. springcloud系列10 整合Hystrix遇到的坑:

    首先配置类: @Bean public ServletRegistrationBean getServlet(){ HystrixMetricsStreamServlet streamServlet ...

  5. ubuntu中出现：程序 'java' 已包含在下列软件包中的解决方法

    已经安装sun java 在终端中输入java,出现以下提示: 程序 'java' 已包含在下列软件包中: * default-jre * gcj-4.8-jre-headless * gcj-4.9 ...

  6. 【转】eclipse上的.properties文件中文编辑显示问题

    首先,解决.properties文件中的中文编辑问题,我们发现,在.properties文件中输入的中文变成了这个样子: 这是eclipse的.properties文件,默认的编码方式是iso-885 ...

  7. redis 学习字符类型 hash

    > HSET userinfo1 username "king" (integer) > HSET userinfo1 passowor " (integer ...

  8. jenkins插件之火线扫描（静态代码扫描）

    参考网址: https://blog.csdn.net/oggboy/article/details/78646622

  9. CHUCK手把手带你搞定OPENSTACK

    一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初重要 ...

  10. c++从txt中读取数据，数据并不是一行路径(实用)

    #include <iostream>#include <fstream>#include <string> using namespace std; //输出空行 ...