<!doctype html>

<html>

<head></head>

<body>

<canvas id="clock" width="" height="">

    您的浏览器不支持canvas标签，无法看到时钟

</canvas>

<script>

    var clock=document.getElementById('clock');

    var cxt=clock.getContext('2d');

    function drawClock(){

        cxt.clearRect(,,,);    //清除画布区域

        var now =new Date();

        var sec=now.getSeconds();

        var min=now.getMinutes();

        var hour=now.getHours();            

        hour=hour+min/;    //小时必须获取浮点类型(小时+分数转化成的小时)

        //问题 19:23:30

        //将24小时进制转换为12小时

        hour=hour>?hour-:hour;

        cxt.lineWidth=;

        cxt.strokeStyle="#A61C3E";    //表盘(蓝色)

        cxt.beginPath();

        cxt.arc(,,,,Math.PI*,false);

        cxt.closePath();

        cxt.stroke();

        //时刻度

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

            cxt.save();

            cxt.lineWidth=;    //设置时针的粗细

            cxt.strokeStyle="#005693";    //设置时针的颜色

            cxt.translate(,);

            cxt.rotate(i**Math.PI/);//角度*Math.PI/180=弧度

            cxt.beginPath();

            cxt.moveTo(,-);

            cxt.lineTo(,-);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

        }

        //分刻度

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

            cxt.save();

            cxt.lineWidth=;

            cxt.strokeStyle="#04562E";

            cxt.translate(,);

            cxt.rotate(i**Math.PI/);

            cxt.beginPath();

            cxt.moveTo(,-);

            cxt.lineTo(,-);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

        }

        //时针

            cxt.save();

            cxt.lineWidth=;

            cxt.strokeStyle="#04562E";

            cxt.translate(,);//设置异次元空间的0，0点，画布的圆心

            cxt.rotate(hour**Math.PI/);

            cxt.beginPath();

            cxt.moveTo(,-);        //针长

            cxt.lineTo(,);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

        //分针

            cxt.save();

            cxt.lineWidth=;

            cxt.strokeStyle="#000";

            cxt.translate(,);

            cxt.rotate(min**Math.PI/);

            cxt.beginPath();

            cxt.moveTo(,-);

            cxt.lineTo(,);

            cxt.closePath();

            cxt.stroke();

            cxt.restore();

        //秒针

            cxt.save();

            cxt.strokeStyle="#611123";

            cxt.lineWidth=;

            cxt.translate(,);

            cxt.rotate(sec**Math.PI/);//设置旋转角度

            cxt.beginPath();    //画图

            cxt.moveTo(,-);

            cxt.lineTo(,);

            cxt.closePath();

            cxt.stroke();

            cxt.beginPath();    //画出时针、分针、秒针的交叉点、

            cxt.arc(,,,,,false);

            cxt.closePath();

            cxt.fillStyle="gray";    //设置填充样式

            cxt.fill();

            cxt.stroke();

            //设置秒针前段的小圆点

            cxt.beginPath();

            cxt.arc(,-,,,,false);

            cxt.closePath();

            cxt.fillStyle="#FFF";

            cxt.fill();

            cxt.stroke();//设置笔触样式(秒针已设置)

            cxt.restore();

        }

    drawClock();    //1000毫秒前要显示

    //使用setInterval(代码,毫秒时间)  让时钟动起来

    setInterval(drawClock,);

</script>

</body>

</html>

HTML5 canvas 指针时钟的更多相关文章

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

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

  2. HTML5 Canvas爱心时钟代码

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

  3. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  4. HTML5 Canvas 绘制时钟

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

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

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

  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. Linux 内存管理与系统架构设计

    Linux 提供各种模式(比如,消息队列),但是最著名的是 POSIX 共享内存(shmem,shared memory). Linux provides a variety of schemes ( ...

  2. Ajax用法

    1.什么是 Ajax? Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML.它不是一门新的语言,而是一种使用现有标准的新方 ...

  3. ftp实现图片上传，文件也类似

    本来用得是easyui得控件 点击按钮实现选择图片得 ,但是老板非得要双击图片框实现上传代码....做个简单得记录 前端代码: 首先,<form>表单要加上 enctype="m ...

  4. 微信小程序弹框提示绑定手环实例

    今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次 ...

  5. JavaScript学习总结（4）——JavaScript数组

    JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...

  6. C# Aspect-Oriented Programming(AOP) 利用多种模式实现动态代理

    什么是AOP(Aspect-Oriented Programming)? AOP允许开发者动态地修改静态的OO模型,构造出一个能够不断增长以满足新增需求的系统,就象现实世界中的对象会在其生命周期中不断 ...

  7. RHEL6安装调试过程中遇到的问题集

    /*** **问题集 2014/6/9 20:55:52** **Autor: Weigong Xu ** ***/ 1. Linux中开启22port: 22port是ssh服务的.你仅仅要启动ss ...

  8. 内网使用 IPV6 之 TunnelBroker隧道（6in4）篇

    内网使用 IPV6 之 TunnelBroker隧道(6in4)篇 据非专业网民推测 tunnelbroker isatap 和 6to4  貌似都需要公网,但有网民测试这位大作的方法可行.特别之处是 ...

  9. JQuery map()函数

    DOM.map(callback(index,domElement)); 对匹配元素执行函数对象. 返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组. 返回数据类 ...

  10. 知无涯者（The Man Who Knew Infinity）

    1913年的1月16号在剑桥大学的三一学院那里,著名的数学家哈代教授收到了一封信,信的开头是这种: "尊敬的先生.仅自我介绍例如以下,我是马德拉斯港务信托处的一个职员,年薪唯独20英镑.23 ...