最近在看新浪体育网球频道（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. 【转】进程同步之信号量机制（pv操作）及三个经典同步问题

    原文地址:http://blog.csdn.net/speedme/article/details/17597373 上篇博客中(进程同步之临界区域问题及Peterson算法),我们对临界区,临界资源 ...

  2. Mybatis复杂嵌套关联一例

    Mybatis  three entity relation:association in collection PatentMapper.xml <resultMap id="Bas ...

  3. hive-site.xml

    https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...

  4. GlusterFs卷的简单操作

    一.创建卷 gluster volume create 例子:gluster volume create gv0 replica 2 server1:/data/brick1/gv0 server2: ...

  5. MySQL分区管理

    以下是我看MySQL官方文档的时候整理的笔记,仅作参考保留. RANGE,LIST分区管理 1:为未分区表创建分区 ; 2:删除某个分区的数据 ALTER TABLE tr DROP PARTITIO ...

  6. HDU5399-多校-模拟

    Too Simple Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  7. Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals) A,B,C

    A.题目链接:http://codeforces.com/contest/828/problem/A 解题思路: 直接暴力模拟 #include<bits/stdc++.h> using ...

  8. MT【9】绝对值二次函数

    解答: 评:容易用绝对值不等式证明当$x\in[1,5]$时$|x^2+px+q|\ge2$

  9. 01 Zabbix采集数据方式

    Zabbix采集数据方式 1. zabbix采集数据方式: 基于专用agent   被监控的设备上面安装agent软件,这个agent必须在设备上面有采集数据的权限 基于SNMP,  net-snmp ...

  10. 洛谷 P1984 [SDOI2008]烧水问题 解题报告

    P1984 [SDOI2008]烧水问题 题目描述 把总质量为1kg的水分装在n个杯子里,每杯水的质量均为(1/n)kg,初始温度均为0℃.现需要把每一杯水都烧开.我们可以对任意一杯水进行加热.把一杯 ...