本示例使用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. Git相关文章

    1.Git教程 2.Git常用命令整理 3.EGit(Git Eclipse Plugin)使用

  2. ndoutils2.2.0(ndo2db)中文乱码问题解决

    ndoutils插入中文时,产生数据库乱码请用下面两个文件: 适用版本:ndoutils-2.0.0 数据库初始化mysql.sql: 修改ndoutils-2.0.0/src目录中的db.c ndo ...

  3. SQL SELECT SET

      SELECT SET 同时对多个变量同时赋值时 支持 不支持 表达式返回多个值时 将返回的最后一个值赋给变量 出错 表达式未返回值时 变量保持原值 变量被赋null值

  4. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  5. android 内存问题

    借鉴:大苞米的博客(http://blog.csdn.net/a396901990) 一.内存溢出(OOM--out of memory) (1)内存溢出引发的问题展现: 1.程序卡顿,响应速度慢(内 ...

  6. c#窗体虚线图形验证码设计

    /************************窗体验证码背景图形设计及核心代码**********/ using System;using System.Collections.Generic;u ...

  7. php js => splice 数组 插入 功能

    php    array_splice 手册详解 array_splice   - 把数组中的一部分去掉并用其它值取代 参数 input 输入的数组. offset 如果 offset 为正,则从 i ...

  8. 阅读笔记Multi-task Learning for Stock Selection [NIPS1996]

    Multi-task Learning for Stock Selection  Joumana Ghosn and Yoshua Bengio 摘要 用人工神经网络预测未来回报以便于做出对应的金融决 ...

  9. iOS工作笔记(十五)

    1.使用MJRefresh上拉加载的小细节 MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingB ...

  10. apache 指定的网络名不再可用 原因及解决方法

    1.出现问题状况: 出现问题网站:http://www.ayyzz.cn/ 前段时间作文大全网出现有时候比较慢,有时候“找不到网页”404错误:另外在error.log里也报错: [Mon May 0 ...