本示例使用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. 数据转换成json传递

    //将奖励转换成json格式 _page.StrRewardToJson = function () { var hdReward = $("#hdReward").find(&q ...

  2. diamond专题（一）– 简介和快速使用

     (转自 http://blog.csdn.net/zh_winer/article/details/50395024) 一.概况 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单 ...

  3. poj3461 Oulipo(KMP模板)

    Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17795   Accepted: 7160 Descripti ...

  4. RedHat6安装gcc

    RedHat RHEL 6.0安装gcc的方法 最近在折腾RedHat6.0 ,全是命令,号称比windows安全的Linux,没有界面,也不知道所谓的专家们如何比的,一个界面做的非常好的Window ...

  5. C#删除文件

    string file =System.Web.HttpContext.Current.Server.MapPath(fileUrl); if (System.IO.File.Exists(file) ...

  6. cdnbest节点安装后连不上主控常见问题

    1. 查看节点程序是否启动 ps -aux |grep kangle 2. 如果节点程序都有启动,可查看日志,节点连接的是不是你帐号的uid帐号或者是否有其他报错信息 tail -f /var/log ...

  7. 在powerdesigner中，一个table，怎么在diagram中创建多个symbol

    两种方式 第一:可以创建多个diagram,直接把表拖到diagram中就可以 第二:复制->粘贴快捷方式,或者Ctrl+C先复制,再Ctrl+K粘贴到Diagram中 说明: ctrl+V 是 ...

  8. Android "adb devices no permissions"

    列出当前连接设备时出现以下情况 [user@dell platform-tools]# ./adb devices List of devices attached ???????????? no p ...

  9. linux命令(1)：ls命令

    ls命令是linux下最常用的命令. ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单,如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单. 通过ls 命令不仅可以查看lin ...

  10. linux 正则表达式与文件格式化处理

    此文涉及命令:grep.sed.awk.printf.diff.cmp.patch. 概念: 什么是正则表示法 简单的说,正则表示法就是处理字符串的方法,他是以行为单位来进行字符串的处理行为, 正则表 ...