最近在看新浪体育网球频道（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. JSP中properties文件的路径问题

    做练习的时候,写了个properties文件,放在src/servlet/目录下,访问文件问题花了点时间折腾,最终得到解决,记下. 环境:eclipse jee oxygen,tomcat 9.0. ...

  2. Linux: HowTo See Directory Tree Structure

    https://www.cyberciti.biz/faq/linux-show-directory-structure-command-line/ Linux: HowTo See Director ...

  3. 如何禁止复制电脑文件到U盘、禁止U盘拷贝文件

    在公司局域网中,有时候我们处于保护电脑文件安全和商业机密的需要,会禁止局域网电脑使用U盘.禁用USB存储设备:或者禁止通过U盘复制电脑文件.禁止U盘拷贝公司电脑文件.那么,怎样实现呢?本文提供两种方法 ...

  4. js語句

    js語句就是告訴瀏覽器要做什麼: js代碼就是js語句序列: js代碼塊就是{}包括的,函數就是一個代碼塊的典型例子: js注釋:單行注釋://,多行注釋:/**/ js對大小寫敏感: js語句可以不 ...

  5. html的表格 table

    創建表格: 每一個表格以table開始: 每一個表格行以tr開始: 每一個數據以td開始:td的內容可以文本.圖像.表格.表單.段落等. 表格邊框: border設置邊框的粗細,但無法設置行間距,也無 ...

  6. BZOJ4010[HNOI2015]菜肴制作——拓扑排序+堆

    题目描述 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予 1到N的顺序编号,预估质量最高的菜肴编号为1.由于菜肴 ...

  7. Arif in Dhaka (First Love Part 2) UVA - 10294（Polya定理）

    这题和POJ-1286一样 题意: 给出t种颜色的n颗珠子 (每种颜色的珠子个数无限制,但总数必须是n), 求能制作出项链和手镯的个数 注意手镯可以翻转和旋转  而 项练只能旋转 解析: 注意Poly ...

  8. day28 反射 属性操作 getattr hasattr setattr delattr

    反射 用字符串来对应其同名的属性或者方法,通过某种方法调用这个字符串来执行方法或者获取属性 网络编程的时候非常好用,是很重要的内容 先看个示例吧: class Teather: dic = { &qu ...

  9. git命令行界面

    学习目标:掌握git命令行界面的操作.掌握最基本的clone add commit push pull操作. 先下载客户端:http://github-windows.s3.amazonaws.com ...

  10. luogu4849 寻找宝藏 (cdq分治+dp)

    设f[i]是已经走到i号点的值. 先要给第四维离散化.然后去重 第一维排序,第二维cdq分治,第三维cdq分治,第四维树状数组,找到满足j(x,y,z,w)<=i(x,y,z,w)的j,给i统计 ...