本示例使用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. web初学之request，session与application

    request (1)request的setAttribute()与getAttribute()方法一般都是成对出现,首先通过setAttribute()方法设置属性与属性值,然后通过getAttri ...

  2. try it, then you know . Emacs

     原来Emacs能做时间管理 http://sachachua.com/blog/2012/07/transcript-emacs-chat-john-wiegley/ http://blog.csd ...

  3. PHP面向对象.__set()，__get()，__isset()，__unset()四个方法的

    一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是, 对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数”__get()”和”__set()”来获取和赋值其属性 ...

  4. case when语句后的表达式

    SQL中Case When语句的语法如下 Simple CASE expression: CASE input_expression WHEN when_expression THEN result_ ...

  5. DragSelectRecyclerView 长按滑动多选图像android特效

    高仿Google相册多选效果,长按某一item后然后滑动选择到任意item,效果很不错,适合相册页面多选部分效果. 本例子主要是自定义DragSelectRecyclerView通过如下展示gridv ...

  6. IOS--UIAlertView造成屏幕闪烁

    在异步操作中,如果直接Show一个UIAlertView可能会造成屏幕闪烁(目前在iPhone5上发现),解决办法如下: UIAlertView *alert = [[UIAlertView allo ...

  7. 写了好多次SSH现在对于框架还是有一定的基础了，但是对于框架下我们该如何进行操作呢？？？

    首先,对于一个老手来说,我们最快捷的就是ctrl+c和ctrl+v,但是我们自己应该复制哪一些代码呢? 1.在我们导完包之后,我们需要写的就是web.xml,在其中,我们要有过滤器及映射和监听器. w ...

  8. range()和xrange()区别

    版本:Python2.7 1.先看帮助说明 (1)range()返回一个递增或递减的数字列表,列表的元素由三个参数决定       start 表示列表开始的值,默认为0       stop 表示列 ...

  9. Ajax完整结构和删除

    1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "aj ...

  10. ListView条目的侧拉删除

    功能实现:类似QQ聊天记录中条目,左滑,可以删除该条目的功能:后续可以在自己的项目中添加该功能. 步骤一: (1)定义主布局,里面包含一个简单的ListView:命名id="lv" ...