最近在看新浪体育网球频道（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. CentOS7 截图

    https://blog.csdn.net/downing114/article/details/51433862 https://blog.csdn.net/lotluck/article/deta ...

  2. Selenium vs TestStudio,Selenium Grid vs F2Test

    Selenium vs TestStudio,不知道差异在哪里? Selenium Grid vs F2Test,后者更优. 用Selenium + FireFox做了一个单机抓图,想要扩展成集群的话 ...

  3. Enterprise Integration Patterns

    https://camel.apache.org/enterprise-integration-patterns.html 企业集成模式,各种模式算法,挺棒的. https://camel.apach ...

  4. Windows命令行下如何使用批处理异步打开一个浏览器进程

    Browse.bat @echo off if '%1'=='-c' ( start /d "C:\Program Files\Google\Chrome\Application\" ...

  5. php的四种基本算法

    /* 冒泡算法:结果从小到大,规则类似波浪推动的沙滩,先初始阈值为 0,初始第一次波浪之后,如果发现有左值比右边的大,就改变阈值并且完成波浪推动,重新初始化阈值为0,如此往复,直到没有阈值改变的情况出 ...

  6. socketserver及相关的类 （处理socket服务端）+ event事件的使用

    编写简单的套接字服务器并不难,然而,如果要创建的并非简单服务器,还要求助于服务器模块. 模块SocketServer是标准库提供的服务器框架的基石,这个框架包括好多服务器,他们基本服务器的基础上添加了 ...

  7. OneZero产品视频

    产品视频地址:http://v.youku.com/v_show/id_XMTU1MDMwOTk2OA==.html

  8. python格式化字符串Type Error: Format Requires Mapping 的问题

    最近几天 频繁看到有这种写法 BASIC_FORMAT = "%(levelname)s:%(name)s:%(message)s" 第一次看到的pythoner看到可能会有点懵逼 ...

  9. jdk1.8 HashMap的keySet方法详解

    我在看HashMap源码的时候有一个问题让我产生了兴趣,那就是HashMap的keySet方法,没有调用HashMap的有关数据的任何方法就能获取到map的所有的键,他是怎么做到的,然后我就通过模拟k ...

  10. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...