Html 5 版电子时钟

效果图：

html 5 canvas元素

　　Html 5的canvas元素可以用于在网页上绘制图形[即canvas的作用]。

　　canvas画布使用JavaScript在网页上绘制图形

　　其拥有绘制各种路径，矩形，圆，字符以及添加图像的方法。

　　（1）在body中创建canvas元素

<canvas id="panel" width="500" height="500" style="border:1px solid #000000"></canvas>

　　<canvas>这里可以放置提示信息，当浏览器不支持canvas元素时，这里面的信息就会显示</canvas>

　　（2）使用JavaScript绘制图形

　　绘制图形时，首先，要获得canvas元素　

var panel = document.getElementById("panel");

　　通过id寻找到canvas，所以html中虽然可以在同一个页面内拥有相同的id标签，但是当JavaScript执行到时就会出现理论上只处理第一个id标签

　　其次，创建context对象，以使用context对象绘制各种路径，矩形，圆，字符以及添加图像的方法

var cxt=c.getContext("2d");

　然后就可以使用JavaScript绘制图形了

　　准备工作，表盘一个：bg.jpg

// 定义初始化方法
function init() { }

　　// 绘制秒针

　　function drawSecond() {}

// 绘制分针
function drawMinute() {}

　 // 绘制时针
function drawHour() {}

// 绘制表针
function draw() {}

// 绘制背景,加入表盘bg.jpg
function drawBackground() {}

// 获取string类型的当前时间
function currTimeStr() {}

// 获取当前时间，12小时制
function currTime() {}

关于坐标

完整代码

<!--!DocType html 表明该Html是一个Html 5文档，这是：Html中的注释方式-->

<!DocType html>

<html>

    <head>

        <title>Html 5 时钟</title>

        <script type="text/javascript">

            // JavaScript用于绘制图形了，这是script的注释形式

            var panel,cxt,img;

            var pw,ph,ox,oy;

            // 定义初始化方法

            function init() {

                //获取canvas对象

                panel = document.getElementById("panel");

                // 获得canvas的宽和高

                pw = panel.width;

                ph = panel.height;

                // 这样平面坐标：(ox,oy)就是canvas的中心坐标了

                ox = pw/2;

                oy = ph/2;

                // 检查浏览器的是否支持Html5

                // [getContext是Html 5中canvas的方法,如果浏览器支持该方法就为真]

                // 创建getContext对象，以使用其中的绘图方法

                if(panel.getContext) {

                    cxt = panel.getContext('2d');

                } else {

                    alert('对不起，你的浏览器不支持Html 5');

                }

                // 转化坐标，将(ox,oy)设置为坐标系的原点

                cxt.translate(ox,oy);

                // 创建图片对象，并1000毫秒即1秒钟调用一次draw()方法来重绘图像表针

                img = new Image();

                img.onload = function() {

                    setInterval('draw()',1000);

                }

                // 将表盘设为canvas的背景

                img.src = 'bg.jpg';

            }

            // 绘制秒针

            // save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。

            function drawSecond() {

                cxt.save();

                // currTime().s即为当前时间的秒钟，Math.PI即为π，弧度单位：π等于180°，2π等于360°，即一个圆周。

                // 60秒，秒针转一圈

                // currTime().s 获得现在的一分钟过了多少秒

                // (2*Math.PI)/(360) 即1°对应Math.PI/180

                // 60秒转一圈即360°，弧度2π，每秒转(Math.PI/180)*((1/60*360=6))

                // rotate(弧度)

                cxt.rotate(Math.PI/180*6*currTime().s);

                // 设置所绘制图形的颜色

                cxt.strokeStyle = "#0099FF";

                // 设置直线的宽度

                cxt.lineWidth = 2;

                // 设置线段以半圆形结束，半径为线的宽度

                cxt.lineCap = 'round';

                // 开始准备工作了，丢弃任何当前定义的路径并且开始一条新的路径

                // 如果没有可能会和之前的图形连起来，产生意想不到的图像

                cxt.beginPath();

                // 画笔的起点

                cxt.moveTo(0,0);

                // 终点，以直线方式

                cxt.lineTo(0,-150);

                // 绘制起点到终点的路径

                cxt.stroke();

                cxt.restore();

            }

            // 绘制分针

            function drawMinute() {

                cxt.save();

                // 弧度

                cxt.rotate(Math.PI/180*6*currTime().m);

                cxt.strokeStyle = "#073737";

                cxt.lineWidth = 6;

                cxt.lineCap = 'round';

                cxt.beginPath();

                cxt.moveTo(0,0);

                cxt.lineTo(0,-100);

                cxt.stroke();

                cxt.restore();

            }

            // 绘制时针

            function drawHour() {

                cxt.save();

                // 时钟转过的角度：例如9:30时针转了270°+(30/60)*30度

                cxt.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/2);

                cxt.strokeStyle = "#F6A900";

                cxt.lineWidth = 10;

                cxt.lineCap = 'round';

                cxt.beginPath();

                cxt.moveTo(0,0);

                cxt.lineTo(0,-50);

                cxt.stroke();

                cxt.restore();

            }

            // 绘制表针

            function draw() {

                cxt.clearRect(-pw/2,-ph/2,pw,ph);

                drawBackground();

                // 显示表针的时候这里可以设置他们的层叠关系

                // Hour在最底层，Z轴坐标最小，先绘制的默认在画布的最底层

                drawHour();

                drawMinute();

                drawSecond();

                // innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的 HTML。

                // 设置id为time的标签[这里是span标签]的显示内容为获得系统当前时间

                document.getElementById('time').innerHTML = '当前系统时间为：'+ currTimeStr();

            }

            // 绘制背景

            function drawBackground() {

                cxt.save();

                cxt.translate(0,0);

                cxt.drawImage(img,-250,-250,500,500);

                cxt.restore();

            }

            // 获取string类型的当前时间

            function currTimeStr() {

                var d = new Date();

                var h = d.getHours();

                var m = d.getMinutes();

                var s = d.getSeconds();

                return h + ':' + m + ':' + s;

            }

            // 获取当前时间，12小时制

            function currTime() {

                var d = new Date();

                var h = d.getHours();

                var m = d.getMinutes();

                var s = d.getSeconds();

                if(h > 12) {

                    h = h - 12;

                }

                return { "h":h,"m":m,"s":s};

            }

        </script>

    </head>

    <body onload="init()">

        <span id="time"></span><br />

        </span><canvas style="border:1px solid #000000" id="panel" width="500" height="500">

            对不起，你的浏览器不支持Html 5

        </canvas>

    </body>

</html>

Html 5 版电子时钟的更多相关文章

Js电子时钟
简单版电子时钟,需要以下几个步骤 1. 封装一个函数返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式效果展示实现 ...
[TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板一块 2.DS3231 ...
JavaScript电子时钟+倒计时
JavaScript时间类获取时分秒: getHours() getMinutes(); getSeconds(); 获取 ...
JS实现电子时钟
目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...
桌面小部件----LED电子时钟实现
桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...
Qt - 与众不同的电子时钟
Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...
C++第15周(春)项目3 - OOP版电子词典（一）
课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序中须要的相 ...
wxWidgets+wxSmith版电子词典
课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序须要的相关 ...
3分钟利用TurnipBit制作电子时钟
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 TurnipBit(www.turnipbit.com)是一个面向青少年的开发板 ...

随机推荐

mysql中把空值放在最后,有值的数据放在前面
order by column is null,column; 如果:order by column,则column中空值的数据放在最前面,有数据的放在后面
Kindeditor上传图片回显不出来
原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.
convert from EST/EDT to GMT
TimeZoneInfo est = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time"); DateTime ...
python 基础 7.6 sys 模块
一.sys 模块 sys 模块主要功能是获取参数 [root@www pythonscripts]# cat 2.py #!/usr/bin/python #coding=utf-8 im ...
Java 学习 day03
01-语句(while) 02-语句(do while) 03-语句(for) 04-语句(for和while的区别) 05-语句(循环语句的其他特点) 06-语句(for语句练习-累加&计数 ...
Mybatis之增删改查操作
准备工作建立整体项目目录新建一个java工程,创建如下工程目录其中com.kang.pojo中存放pojo类,com.kang.test中存放测试类. 源码目录config中存放Mybatis的 ...
九度OJ 1178：复数集合（插入排序）
时间限制:1 秒内存限制:32 兆特殊判题:否提交:8393 解决:1551 题目描述: 一个复数(x+iy)集合,两种操作作用在该集合上: 1.Pop 表示读出集合中复数模值最大的那个复数,如 ...
css多余字符显示省略号
width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; ;
HTML 学习笔记 JQuery（DOM 操作3）
设置和获取HTML 文本和值 1.html()方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容例子 <html> <he ...
Spring IOC 容器源码分析(转)
原文地址 Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容器.既然大家平时都要用到 Spring,怎么可以不好好了解 Spring 呢 ...

Html 5 版 电子时钟

Html 5 版 电子时钟的更多相关文章

随机推荐

热门专题

Html 5 版电子时钟

Html 5 版电子时钟的更多相关文章