本示例使用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. java中 sleep 与 wait 的区别

    1.所属类不同 sleep是Thread类的方法: wait是Object类的方法: 2.功能不同 sleep是线程用来控制自身流程的,在调用sleep()方法的过程中,线程不会释放对象锁: wait ...

  2. information_schema系列八(事物，锁)

    今天我们主要看一下MySQL information_schema里面的关于innodb的锁和事物的两三个系统表: 看一下锁对应的sql: select * from innodb_lock_wait ...

  3. 一个简单的synchronized多线程问题、梳理与思考

    一个程序,多个线程同时操作一个变量,给这个变量+1().功能很简单,可是怎么样去实现呢?这其中涉及到了哪些问题? 最基础想法 见代码: public class Test extends Thread ...

  4. windbg学习---.browse打开一个新的command 窗口

    .browse r eax .browse <command>将会显示新的命令浏览窗口和运行给出的命令

  5. HRS（CRLF Injection）

    [HRS(CRLF Injection)] CRLF是”回车 + 换行”(\r\n)的简称.在HTTP协议中,HTTP Header与HTTP Body是用两个CRLF分隔的,浏览器就是根据这两个CR ...

  6. Git保存密码

    TortoiseGit中,通过https方式连接时,默认是不会保存帐号密码,需要我们每次输入一次,真心很麻烦! 通过简单的设置,就可以解决这一问题! 编辑仓库目录中本地的”.git/config”文件 ...

  7. msdn webcast 下载地址整理

    http://blog.csdn.net/he_8134/article/details/2069194

  8. Redis在windows下安装和PHP中使用

    1.redis简介redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...

  9. 纯css来画图-border应用

    基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...

  10. IE11部分图片无法显示的兼容办法

    问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误 ...