<!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创建新用户并给予root权限

    root比windows的系统管理员的能力更大,足以把整个系统的大部分文件删掉,导致系统完全毁坏,不能再次使用.所以,用root进行不当的操作是相当危险的,轻微的可以死机,严重的甚至不能开机.所以,在 ...

  2. 洛谷——V1772 巧妙填数

    描述 将1,2,\cdots,91,2,⋯,9共99个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:31:2:3的比例. 试求出所有满足条件的三个三位数.例如:三个三位数192,384, ...

  3. 3.实战HTML+CSS布局（实例入门篇）

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  4. session 、cookie、token的区别及联系

    本文转自:https://blog.csdn.net/jikeehuang/article/details/51488020:https://blog.csdn.net/weixin_37196194 ...

  5. Docker---(2)为什么要用Docker

    原文:Docker---(2)为什么要用Docker 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_ ...

  6. 【河南省多校脸萌第六场 B】点兵点将

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 先每个单位都不建造bi; 打死一个ai之后,把bi加入到大根堆里面. 然后等到不够打死某个单位的时候; 从大根堆里面取出最大的那个bi;不断取, ...

  7. 机器学习算法中怎样选取超參数：学习速率、正则项系数、minibatch size

    本文是<Neural networks and deep learning>概览 中第三章的一部分,讲机器学习算法中,怎样选取初始的超參数的值.(本文会不断补充) 学习速率(learnin ...

  8. Dcloud课程4 如何进行APP接口开发

    Dcloud课程4 如何进行APP接口开发 一.总结 一句话总结:通过json或者xml. 1.APP如何进行通信? 通过在地址上接参数指明传递的数据的类型.而数据传递的类型一般是XML和json. ...

  9. JS学习笔记 - 面向对象

    类.对象类:模子对象:产品(成品) 蛋糕(对象) 模子(类) Array 类 arr 对象 Array.push(); 错 arr.push(); 对 new arr(); 错 原型prototype ...

  10. 安装orabbix

    须知: (1). orabbix使用root用户安装. (2). orabbix安装在zabbix server端,而不是安装在Oracle端.   1.下载 Orabbix   2. 解压软件 un ...