本示例使用HTML5 canvas，模拟显示了一个时钟， 请使用支持HTML5的浏览器预览效果：

HTML部分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

    <title>canvas绘图</title>

</head>

<body onload="init()">

<canvas id="canvas" width="200px" height="200px"></canvas>

</body>

</html>

JavaScript部分：

function init(){

    var canvas = document.getElementById("canvas"),

        context = canvas.getContext("2d");

    setInterval(function(){draw(canvas, context)},1000);

}

function draw(canvas, context){

    var x = canvas.width,

        y = canvas.height,

        r = Math.min(x/2, y/2);

    context.clearRect(0, 0, x, y); //清除绘画历史

    //绘画钟框

    context.fillStyle = "#f1f1f1";

    drawCircle(context, x, y, r);

    //绘画文字

    var tx = x/2,ty = y/2,tr = 0.8*r;

    context.font = "bold 12px 微软雅黑";

    context.fillStyle = "#000";

    drawText(context, "1", tx + 0.5*tr,ty - 0.866*tr);

    drawText(context, "2", tx + 0.866*tr, ty - 0.5*tr);

    drawText(context, "3", tx + tr, ty);

    drawText(context, "4", tx + 0.866*tr, ty + 0.5*tr);

    drawText(context, "5", tx + 0.5*tr, ty + 0.866*tr);

    drawText(context, "6", tx, ty + tr);

    drawText(context, "7", tx - 0.5*tr, ty + 0.866*tr);

    drawText(context, "8", tx - 0.866*tr, ty + 0.5*tr);

    drawText(context, "9", tx - tr, ty);

    drawText(context, "10", tx - 0.866*tr, ty - 0.5*tr);

    drawText(context, "11", tx - 0.5*tr, ty - 0.866*tr);

    drawText(context, "12", tx, ty - tr);

    //获取当前时间

    var date = new Date(),

        h = date.getHours(),

        m = date.getMinutes(),

        s = date.getSeconds(),

        angleH = (360/12)*Math.PI/180,

        angleM = (360/60)*Math.PI/180

    context.strokeSyle = "#000";

     //绘制时刻度

    drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3, 12);

     //绘制分刻度

    drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1, 60);

    //绘画时分秒针

    drawCircle(context, x, y, 3);

    drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r);

    drawNeedle(context, x, y, r, m*angleM + s*angleM/60, -0.6*r);

    drawNeedle(context, x, y, r, s*angleM, -0.75*r);

}

//绘画圆

function drawCircle(context, x, y, r){

    context.save();

    context.beginPath();

    context.arc(x/2, y/2, r, 0, Math.PI*2, 0);

    context.fill();

    context.closePath();

    context.restore();

}

//绘画文字方法

function drawText(context, text, x, y){

    context.save();

    x -= (context.measureText(text).width/2);

    y += 4;

    context.translate(x, y);

    context.fillText(text, 0, 0);

    context.restore();

}

//绘制刻度方法

function drawScale(context, x, y, r, rotate, start, end, lineWidth, loop){

    context.save();

    context.beginPath();

    context.translate(x/2,y/2);

    context.lineWidth = lineWidth;

    for (var i = 0; i < loop; i++) {

        context.rotate(rotate);

        context.moveTo(0, start);

        context.lineTo(0, end);

    }

    context.closePath();

    context.stroke();

    context.restore();

}

//绘画时分秒针方法

function drawNeedle(context, x, y, r, rotate, line){

    context.save();

    context.translate(x/2,y/2);

    context.beginPath();

    context.rotate(rotate);

    context.moveTo(0, 0.1*r);

    context.lineTo(0, line);

    context.closePath();

    context.stroke();

    context.restore();

}

html5 canvas绘画时钟的更多相关文章

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

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

  2. HTML5 Canvas爱心时钟代码

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

  3. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  4. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  5. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  6. html5 canvas js(时钟)

    <!doctype html> <html> <head> <title>canvas</title> </head> < ...

  7. html5 canvas简易时钟

    <canvas id='clock' width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/ ...

  8. html5 canvas时钟

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

  9. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

随机推荐

  1. MySQL分区表管理

    RANGE,LIST分区管理 1:为未分区表创建分区 ALTER TABLE trb3 PARTITION BY KEY(id) PARTITIONS 2; 2:删除某个分区的数据 ALTER TAB ...

  2. [ 转 ] scrapy 中解决 xpath 中的中文编码问题

    1.问题描述: 实现定位<h2>品牌</h2>节点 brand_tag = sel.xpath("//h2[text()= '品牌']") 报错:Value ...

  3. PHP禁止同一IP频繁访问以防止网站被防攻击或采集的代码

    PHP禁止同一IP频繁访问以防止网站被防攻击或采集的代码 <?php /* *通过禁止IP频繁访问防止网站被防攻击代码*design by www.scutephp.com*/header('C ...

  4. 15.6.6 Configuring Thread Concurrency for InnoDB

    innodb_thread_concurrency 设置inndb线程个数,如果超过则休眠一段时间,时间根据 innodb_thread_sleep_delay 单位为微妙,然后放进队列. innod ...

  5. hdu 3622 Bomb Game(二分+2-SAT)

    Bomb Game Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  6. javascript篇-----函数apply()和call()

    转自:http://www.jb51.net/article/28013.htm 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的 ...

  7. Java for循环的几种用法

    J2SE 1.5提供了另一种形式的for循环.借助这种形式的for循环,可以用更简单地方式来遍历数组和Collection等类型的对象.本文介绍使用这种循环的具体方式,说明如何自行定义能被这样遍历的类 ...

  8. test3

    下面写几个示例:这是行内公式: \( e^{\pi i} + 1 = 0\) ,下面的是行间公式: \[ e^{\pi i} + 1 = 0. \] 另一个复杂的公式: $$J_\alpha (x) ...

  9. python之路——面向对象（进阶篇）

    面向对象进阶:类成员.类成员的修饰符.类的特殊成员 类成员 类成员分为三大类:字段.方法.属性 一.字段 静态字段 (属于类) 普通字段(属于对象) class City: # 静态字段 countr ...

  10. jquery里面的名称冲突解决方法

    jQuery 使用 $ 符号作为 jQuery 的简介方式. 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号. jQuery 使用名为 noConflict( ...