1. [图片] QQ截图20120712130049.png


​2. [代码][HTML]代码

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 时钟</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <style>
        .clocks {
          height: 500px;
          margin: 25px auto;
          position: relative;
          width: 500px;
        }
      </style>
    </head>
    <body>
        <header>
            <h2>HTML5 时钟</h2>
        </header>
        <div class="clocks">
            <canvas id="canvas" width="500" height="500"></canvas>
        </div>
    </body>
</html>
3. [代码][JavaScript]代码     
// inner variables
var canvas, ctx;
var clockRadius = 250;
var clockImage;
 
// draw functions :
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
 
function drawScene() { // main drawScene function
    clear(); // clear canvas
 
    // get current time
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    hours = hours > 12 ? hours - 12 : hours;
    var hour = hours + minutes / 60;
    var minute = minutes + seconds / 60;
 
    // save current context
    ctx.save();
 
    // draw clock image (as background)
    ctx.drawImage(clockImage, 0, 0, 500, 500);
    http://www.enterdesk.com/special/shouhui/​
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.beginPath();手绘图片
 
    // draw numbers
    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);
    }
 
    // draw hour
    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();
 
    // draw minute
    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();
 
    // draw second
    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();
}
 
// initialization
$(function(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
 
    // var width = canvas.width;
    // var height = canvas.height;
 
clockImage = new Image();
clockImage.src = 'http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png';
 
    setInterval(drawScene, 1000); // loop drawScene
});

HTML5 Canvas 时钟的更多相关文章

  1. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  2. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  3. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

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

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

  6. HTML5 Canvas爱心时钟代码

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

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  9. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

随机推荐

  1. 天天算法————快排及java实现。

    快排说的很邪乎,原理懂了,实现自然也就出来了: public void static quickSorted( int[] a ,int low ,int high){ //递归结束条件 if(low ...

  2. Codeforces 471 D MUH and Cube Walls

    题目大意 Description 给你一个字符集合,你从其中找出一些字符串出来. 希望你找出来的这些字符串的最长公共前缀*字符串的总个数最大化. Input 第一行给出数字N.N在[2,1000000 ...

  3. 转：关于使用ImageMagick和Tesseract进行简单数字图像识别

    据说Tesseract可是世界排名第三的OCR神器,2010年又更新了3.0版本.Tesseract原先是HP写的,现在Open Source了. 下面介绍怎么用Tesseract配合ImageMag ...

  4. 邁向IT專家成功之路的三十則鐵律 鐵律十四：IT人言談之道-守中

    人與人之間的互動交談最重要的莫過於真誠與頃聽.老子曾在所著的道德經之中,言道:「多言數窮,不如守中」,其意思簡單來說就是不要說多餘的話.人與人之間的相處,常為了一個面子問題,你來我往的爭論不休,其實真 ...

  5. Java中的BigInteger在ACM中的应用

    Java中的BigInteger在ACM中的应用 在ACM中的做题时,常常会遇见一些大数的问题.这是当我们用C或是C++时就会认为比較麻烦.就想有没有现有的现有的能够直接调用的BigInter,那样就 ...

  6. Oracle对没有主键的表分页

    普通情况对于有主键,能够做唯一表识的表.我们能够利用主键和rownum配合实现.比如: select scott.emp.* from scott.emp left join (select empn ...

  7. hibernate session缓存

    Session 概述 Session 接口是 Hibernate 向应用程序提供的操纵数据库的最基本的接口, 它提供了基本的保存, 更新, 删除和载入 Java 对象的方法. Session 具有一个 ...

  8. 解决MySQL出现大量unauthenticated user的问题

    近期OJ及相关的站点打开异常的慢,简直崩溃,一直没找着原因. 进入数据库server.进到mysql里,用show processlist命令查看一下,发现有非常多的unauthenticated u ...

  9. django（一）--- 安装django

    准备好虚拟环境:Python开发虚拟环境 安装前的准备 1. 下载django:django下载 本文使用的是django-1.5.9(不同版本号之间的差别还是比較大的.别搞错了) 2.准备djang ...

  10. 我对C语言输入和输出和一些其他的疑惑点

    gets(字符串数组) 用来接收字符串数组 等同于 scanf("%s",字符串数组名)  需要说的一点是 字符串的数组名 就表示数组的第一个元素的地址 所以加不加&取地址 ...