HTML5 canvas 指针时钟

<!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 指针时钟的更多相关文章

[ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
HTML5 Canvas 绘制时钟
网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...
html5 Canvas绘制时钟以及绘制运动的圆
1.绘制时钟  <script type="text/javascript"> window.onload=function(){ ...
html5 canvas js(时钟)
<!doctype html> <html> <head> <title>canvas</title> </head> < ...
html5 canvas简易时钟
<canvas id='clock' width=500 height=500> 您的浏览器需要升级 </canvas> <script type="text/ ...
html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之时钟 Demo</title> <!--简 ...

随机推荐

【翻译自mos文章】OGG的集成捕捉模式支持Oracle database标准版么？
OGG的集成捕捉模式支持Oracle database标准版么? 来源于: Does OGG 11.2.1 Integrated Capture Work with Oracle Database S ...
堆－heap
#include <vector> #include <cstdio> using namespace std; class Heap { private : vector&l ...
TextView- 内容过长省略号设定
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_conte ...
JSP中使用EL表达式
EL表达式 :EL 全名为Expression Language,就是为了替代<%= %>脚本表达式. EL主要作用: 获取数据: EL表达式主要用于替换JSP页面中的脚本表达式,以从各种 ...
Java学习笔记八
IO流:就是input/output输入/输出流. 一.字节流操作文件的便捷类:FileWriter和FileReader import java.io.FileWriter; import java ...
【2017 Multi-University Training Contest - Team 6】Inversion
[链接]h在这里写链接 [题意] 给出一个序列,求2~n每一个数,下标不是这个数倍数的最大值是什么? [题解] 把a数组从大到小排序. 每个位置i,逆序枚举b数组,找到第一个对应下标不是i的倍数的,直 ...
利用Socket进行大文件传输
分类: WINDOWS 最近接触到利用socket进行大文件传输的技术,有些心得,与大家分享.首先看看这个过程是怎么进行的(如下图): 所以,我们需要三个socket在窗体加载的时候初始化: ...
洛谷——P1179 数字统计
https://www.luogu.org/problem/show?pid=1179 题目描述请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 ...
Android实践 -- 监听应用程序的安装、卸载
监听应用程序的安装.卸载在AndroidManifest.xml中注册一个静态广播,监听安装的广播 android.intent.action.PACKAGE_ADDED 监听程序卸载的广播 and ...
StringBuilder和String的区别
使用 StringBuilder 语言 C# String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为 ...

HTML5 canvas 指针时钟

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

随机推荐

热门专题