最近在看新浪体育网球频道（http://sports.sina.com.cn/tennis/）的时候，看到了下面的劳力士广告的时钟是用canvas做的，于是也实现了一个简单的canvas时钟。直接上代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>clock</title>

</head>

<body>

    <canvas id="clock" width="500" height="700"></canvas>

    <script type="text/javascript" src="js/clock.js"></script>

</body>

</html>
//时钟

function clock(canvas) {

    this.canvas = canvas;

    this.ctx = canvas.getContext('2d');

    this.clear = function() {

        var ctx = this.ctx;

        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

    }

    //初始化调用

    this.init = function() {

            //图片加载

            var clockImage = new Image();

            var that = this;

            clockImage.src = './images/clock.png';

            clockImage.onload = function() {

                setInterval(function() {

                    that.drawClock(clockImage);

                }, 1000)

            }

        }

        //画时钟

    this.drawClock = function(img) {

            this.clear();

            this.drawClockBg(img);

            this.drawTime();

        }

        //画时钟背景

    this.drawClockBg = function(img) {

        var ctx = this.ctx;

        ctx.drawImage(img, 0, 0, 500, 500);

        ctx.save();

        //转到原点

        ctx.translate(500 / 2, 500 / 2);

        //画数字

        var clockRadius = 250;

        ctx.font = '36px Arial';

        ctx.fillStyle = '#000';

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        for (var n = 1; n <= 12; n++) {

            var theta = (n - 3) * (Math.PI * 2) / 12;

            var x = clockRadius * 0.7 * Math.cos(theta);

            var y = clockRadius * 0.7 * Math.sin(theta);

            ctx.fillText(n, x, y);

        }

        ctx.restore();

    }

    //画时间

    this.drawTime = function() {

        // 获取时间

        var date = new Date();

        var hours = date.getHours();

        var minutes = date.getMinutes();

        var seconds = date.getSeconds();

        var temhours = hours > 12 ? hours - 12 : hours;

        var hour = temhours + minutes / 60;

        var minute = minutes + seconds / 60;

        var ctx = this.ctx;

        var clockRadius = 250;

        ctx.save();

        ctx.fillStyle = '#000';

        //重新转到时钟原点

        ctx.translate(500 / 2, 500 / 2);

        //画时针

        ctx.save();

        //计算出线转动的角度

        var theta = (hour - 3) * 2 * Math.PI / 12;

        ctx.rotate(theta);

        ctx.beginPath();

        //通过画线划出时针

        ctx.moveTo(-15, -5);

        ctx.lineTo(-15, 5);

        ctx.lineTo(clockRadius * 0.5, 1);

        ctx.lineTo(clockRadius * 0.5, -1);

        ctx.fill();

        ctx.restore();

        // 画分针

        ctx.save();

        var theta = (minute - 15) * 2 * Math.PI / 60;

        ctx.rotate(theta);

        ctx.beginPath();

        ctx.moveTo(-15, -4);

        ctx.lineTo(-15, 4);

        ctx.lineTo(clockRadius * 0.8, 1);

        ctx.lineTo(clockRadius * 0.8, -1);

        ctx.fill();

        ctx.restore();

        // 画秒针

        ctx.save();

        var theta = (seconds - 15) * 2 * Math.PI / 60;

        ctx.rotate(theta);

        ctx.beginPath();

        ctx.moveTo(-15, -3);

        ctx.lineTo(-15, 3);

        ctx.lineTo(clockRadius * 0.9, 1);

        ctx.lineTo(clockRadius * 0.9, -1);

        ctx.fillStyle = '#0f0';

        ctx.fill();

        ctx.restore();

        ctx.restore();

        //画当前时间

        ctx.font = "60px impact";

        ctx.fillStyle = '#960';

        ctx.textAlign = 'center';

        ctx.fillText((hours > 9 ? hours : '0' + hours) + ':' + (minutes > 9 ? minutes : '0' + minutes) + ':' + (seconds > 9 ? seconds : '0' + seconds), 250, 600);

    }

}

window.addEventListener('load', function() {

    canvas = document.getElementById('clock');

    new clock(canvas).init();

});

这里的实现还是比较简单的。利用Date对象，获取当前的时间，然后画出当前时间点的钟表状态，最后用setInternval，每秒钟清除画布，重新再画一下一个钟表。里面用到的canvasAPI就不细说了，感兴趣的可以去了解一下canvas的API,它提供了很多强大的功能。

canvas实现时钟的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  3. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  4. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  6. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  7. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  8. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  9. 用canvas绘制时钟

    用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id=& ...

  10. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

随机推荐

  1. ASP.NET MVC缓存使用

    局部缓存(Partial Page) 1.新建局部缓存控制器: public class PartialCacheController : Controller { // GET: /PartialC ...

  2. Oracle数据库SQLPLUS 连接显示 ??? 的解决

    linux下 安装了中文版本的,造成sqlplus 连接时出现了乱码 如图 一开始以为是LANG 变量的问题 后来发现是NLS_LANG的问题 解决方法: export NLS_LANG=" ...

  3. [转帖] kubeadm搭建kubernetes集群

    http://www.bladewan.com/2018/01/02/kubernetes_install/ 学习中 kubernetes V1.9安装(附离线安装包和离线镜像)  2018-01-0 ...

  4. ubuntu美化 mac风格

    安装tweak sudo apt install gnome-tweak-tool sudo apt install chrome-gnome-shell https://extensions.gno ...

  5. 关于python性能相关测试cProfile库

    http://blog.csdn.net/gzlaiyonghao/article/details/1483728 收藏一个大神对这个问题的介绍. 我就不多做污染了.另外还有两个 增强库可以针对cPr ...

  6. Java 死锁

    什么是死锁? 当一个线程永远地持有一个锁,并且其他线程都尝试去获得这个锁时,那么它们将永远被阻塞,当线程A持有锁1想获取锁2,当线程B持有锁2想获取锁1 这种情况下就会产生2个线程一直在阻塞等待其他线 ...

  7. 一本通1587【例 3】Windy 数

    1587: [例 3]Windy 数 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 原题来自:SCOI 2009 Windy 定义了一种 Windy 数:不含前 ...

  8. BZOJ3175[Tjoi2013]攻击装置——二分图最大独立集

    题目描述 给定一个01矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置(x,y)都可以按照“日”字攻击其周围的 8个位置(x-1,y-2),(x-2,y-1),(x+1,y-2),(x+2,y- ...

  9. POJ - 1062（昂贵的聘礼）（有限制的spfa最短路）

    题意:...中文题... 昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54350   Accepted: 16 ...

  10. 【总结】 Lucas定理

    \(Lucas\)定理: \(C^x_y≡C^{x/p}_{y/p}*C^{x\%p}_{y\%p} ~~(mod~p)\) 证明不会2333 void pre(){ A[0]=A[1]=B[0]=B ...