在见识了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. phaser小游戏框架学习（一）

    这两天由于项目的需要,所以简单学了一下phaser框架. 官网:http://phaser.io/ 还有一个phaser小站,是中文的网站,但是内容不如英文文档全,大家也可以去看这个网站,需要查阅AP ...

  2. shared_ptr 和auto_ptr智能指针

    shared_ptr:计数的智能指针 它是一个包装了new操作符在堆上分配的动态对象,但它实现的是引用计数型的智能指针 ,可以被自由地拷贝和赋值,在任意的地方共享它,当没有代码使用(引用计数为0)它时 ...

  3. max Count Group by

    select UserName ,Max(LoginTime),count(1) from LoginLog group by UserName 只 group by UserName就行 可以得到L ...

  4. anglarJs分页

    首先在页面引入分页插件 <script src="../plugins/angularjs/pagination.js"></script> <lin ...

  5. Linux 磁盘 分区 挂载点的理解

    在Linux中一切皆文件: 虚拟文件系统(Virtual File System, 简称 VFS), 是 Linux 内核中的一个软件层,用于给用户空间的程序提供文件系统接口:同时,它也提供了内核中的 ...

  6. Flask&&人工智能AI --5 Flask-session、WTForms、数据库连接池、Websocket

    未完待续.... DButils 什么是数据库连接池 数据库连接池负责分配.管理和释放数据库连接,它允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个:释放空闲时间超过最大空闲时间的数据库 ...

  7. php内置web server

    今天刚开始正式学习PHP(之前有一点了解),推荐学习的网站是w3school.一开始不知道tomcat服务器不支持PHP脚本,直接把.php文件放到tomcat里面去运行,结果嵌入的php代码段没有什 ...

  8. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  9. C语言指针收藏

    指针是什么 >>每一个内存单元只能同时存储一个数据,如何保证内存单元同时只能存储一个数据,可以使用编号的方式实现内存单元标记,此编号就是指针. >>指针是一个变量,指针是存放着 ...

  10. [2019BUAA软工]第一次团队作业

    Team V1 团队启动   BUAA Team V1 于2019年3月正式成立,将开始为期四个月的合作. 队员介绍 Name Summary Sefie wxmwy V1-bug制造公司资深工程师精 ...