<!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. Android 阅读器架构图，网上收集，留做存货

    这个结构图是网上收集的图片.基结构明晰简洁.易于后期维护.本文会继续收集很多其他其他优秀的结构图,望有图的朋友推荐~

  2. web.xml的配置及加载顺序

    一web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...

  3. HttpClient的基本使用

    HttpClient的基本使用 前言 HttpClient是Apache提供的一个用于在Java中处理HTTP请求.响应操作的工具,由于JDK自带的API对HTTP协议的支持不是很友好,使用起来也不是 ...

  4. PatentTips - Method to manage memory in a platform with virtual machines

    BACKGROUND INFORMATION Various mechanisms exist for managing memory in a virtual machine environment ...

  5. 洛谷 P1781 宇宙总统

    P1781 宇宙总统 题目背景 宇宙总统竞选 题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人竞选总统,现在票数已经统计完毕,请你算出谁能够当上总统. 输入输出 ...

  6. mysql新加入用户与删除用户详细操作命令

    方法1 :使用mysql root(root权限)用户登陆直接赋权也能够创建用户 /usr/bin/mysqladmin -u root password 123456 mysql -uroot -p ...

  7. 【Expression 序列化】WCF的简单使用及其Expression Lambada的序列化问题初步解决方案

    地址:http://www.cnblogs.com/guomingfeng/tag/Expression%E5%BA%8F%E5%88%97%E5%8C%96/

  8. 二、MongoDB基础知识

    1.文档是MongoDB的核心概念.文档就是键值对的一个有序集{'msg':'hello','foo':3}.类似于python中的有序字典. 需要注意的是: #1.文档中的键/值对是有序的. #2. ...

  9. OpenCV人脸检測(完整源代码+思路)

    本博文IDE为vs2013 OpenCV2.49 话不多说,先看视频演示(20S演示): 例如以下: https://v.youku.com/v_show/id_XMjYzMzkxMTYyMA==.h ...

  10. Swift iOS tableView static cell动态计算高度

    TableView是iOS开发中经常使用的组件.有些表格由于UILabel包括的文本字数不一样,须要显示的高度也会不同,因此须要动态计算static cell的高度.我用的是static cell,注 ...