最近在看新浪体育网球频道（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. 安装虚拟环境和Flask

    一.Flask 使用前准备 一. 安装及创建虚拟环境 1. 安装虚拟环境 win + R -> cmd -> pip install virtualenv -> 出现 Success ...

  2. [转帖]数据中心网络里的Underlay和Overlay

    数据中心网络里的Underlay和Overlay https://blog.csdn.net/zjc801blog/article/details/54289683 2017年01月09日 15:47 ...

  3. loadrunner测试结果三

    结果摘要: 场景执行情况: 该部分给出了本次测试场景的名称.结果存放路径 及 场景的持续时间 统计信息摘要 statistic summary 该部分给出了场景执行结束后并发数.总吞吐量.平均每秒吞吐 ...

  4. html 背景

    用語設置背景的屬性 bgcolor設置背景顏色.可以使用名字.16進制和rgb三種形式的參數: <body bgcolor="#000000"> <body bg ...

  5. html 塊 div span

    塊級元素:元素結束后,另起一行:如p,table,h1,ul,ol 內聯元素:元素結束后,不會另起一行:如a,td.image.b <div>是塊級元素,div本身沒有含義,div是htm ...

  6. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

  7. codeforces548B

    Mike and Fun CodeForces - 548B Mike and some bears are playing a game just for fun. Mike is the judg ...

  8. 洛谷 P4878 [USACO05DEC]layout布局

    题面链接 sol:差分约束系统裸题,根据a+b<=c建个图跑个最短路就没了... #include <queue> #include <cstdio> #include ...

  9. Spark_RDD之基本RDD操作

    1.基本转化操作    1.1最常用的两个转化操作时map()和filter(). map()接收一个函数,把这个函数用于RDD中的每个元素,将函数作用之后的结果作为结果RDD中元素的值. filte ...

  10. ansible系列5-开启加速 Ansible 执行速度的功能

    SSH pipelining 是一个加速 Ansible 执行速度的简单方法.ssh pipelining 默认是关闭,之所以默认关闭是为了兼容不同的 sudo 配置,主要是 requiretty 选 ...