<!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. js12--块作用域函数作用域

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 43.c++指针类型转换

    数据类型转换(static_cast) //数据类型转换 printf("%d\n", static_cast<int>(10.2)); 指针类型转换(reinterp ...

  3. 【2017中国大学生程序设计竞赛 - 网络选拔赛】Palindrome Function

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6156 [题意] 已知函数f(x, k),如果10进制数x在k进制下是个回文数,那么f(x, k)值为k, ...

  4. SpringMVC 传递相同名称的参数的最佳方法

    华为云4核8G,高性能云服务器,免费试用 >>>   SpringMVC 多个对象的相同字段参数传递解决方案,在SpringMVC中,有时需要传递多个对象(除了Model和web元素 ...

  5. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第六篇：拦截器

    摘要      本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题      我们继续完善“MVC公告发布系统”, ...

  6. jedate-开始使用一款好用的时间插件

    jeDate日期控件 -(原生JS版)jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件,包含 多语言.设定年月(YYYY-MM).日期范围限制.开始日期设定.自定 ...

  7. C++开源码项目汇总

    Google的C++开源码项目 v8  -  V8 JavaScript Engine V8 是 Google 的开源 JavaScript 引擎. V8 採用 C++ 编写,可在谷歌浏览器(来自 G ...

  8. 零基础学python-2.3 凝视

    在python里面,使用"#"号表示凝视的開始,一整行到结束就是凝视,他的主要作用提示这段代码到底有什么用处 print("---------欢迎来到猜数字的地方.请開始 ...

  9. python opencv3 —— 常用工具、辅助函数、绘图函数（图像添加文本、矩形等几何形状）

    1. cv2.hconcat().cv2.vconcat() 将从摄像头捕获的多个图像帧,横向(cv2.hconcat)或纵向(cv2.vconcat)拼接到一起,使得可以在一个 window 中进行 ...

  10. struts2--笔记（一）

    1.什么是struts2? 框架是一些已经写好的代码,一般情况下于产品是无关的,可以提高效率. 2.javaEE的三层结构:表现层.业务层.持久层组成,struts是变现层的一个框架结构,分成结构的方 ...